Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to prevent a span from breaking into the next line - responsive webdesign?

How to prevent a span from breaking into the next line - responsive webdesign?

Problem

Following simple list, where in every h4, there is a Span at the end.

  • Prevent LineBreakOfPlus o

  • Digital Signage o

    … 

Screenshot of the page's source:


The CSS for the span looks like this …

.items .goto {
   font-family: 'QuaySans-Icons';
   font-size: 1.6em;
   position: relative;
   float: right;
}

The final thing looks like this:

The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.

Do you have any creative solution or idea on how to prevent this from happening?

Kind regards and thank you in advance, Matt

Problem courtesy of: matt

Solution

If you want the icon to keep inline with the last word in your text line, you can simply do:

  • Prevent LineBreakOfPluso

  • Digital Signageo

and the CSS might be:

.items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.items li {
    border-bottom: 1px solid gray;
    margin: 0;
    padding: 0;
}
.items h4 {
    margin: 0;
}
.items .goto {
    background-color: gray;
    font-size: 1.6em;
    margin-left: 10px; /* optional */
}

If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.

You can use margin-left to create visual spacing or insert a &nbsp entity before the span, quite a few ways to do. The details depend a bit on what effect you want.

Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)

Keeping Icon Right Justified

Here is one approach to pinning the icon to the right of the h4 element:

.ex2.items h4 {
    position: relative;
    line-height: 1.5;
    outline: 1px dotted blue;
    padding-right: 2.00em;
}
.ex2.items .goto {
    background-color: wheat;
    line-height: 1.00;
    font-size: 1.6em;
    position: absolute;
    right: 0;
    bottom: 0.0em;
    height: 1.00em;
    width: 1.00em;
    outline: 1px dotted red;
}

Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.

Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.

Solution courtesy of: Marc Audet

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to prevent a span from breaking into the next line - responsive webdesign?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×