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


Tags: css,html5,css3,responsive-design,line-breaks

Problem :

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

<ul class="items">
    <li>
        <h4>Prevent LineBreakOfPlus <span class="goto">o</span>
        </h4>
    </li>
    <li>
        <h4>Digital Signage <span class="goto">o</span></h4>
        … 

</ul>

Screenshot of the page's source:

enter image description here


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:

enter image description here

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.

enter image description here

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

Kind regards and thank you in advance, Matt



Solution :

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

<ul class="items">
    <li>
         <h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
    </li>
    <li>
         <h4>Digital Signage<span class="goto">o</span></h4>
    </li>
</ul>

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.


    CSS Howto..

    How to Style Unique CSS Navigation Menu

    how to create Active State in CSS Navigations

    css - how to change image source by its id?

    How to aligning icon on right side of the screen when the screen size is small

    How can i select the div from CSS?

    CSS bottom bar isn't correctly shown with chrome

    How to use @page CSS in ASP.NET MVC View

    How can I achieve float left at bottom and float right at top with css flexbox?

    How to make flash movie to scale proportunatly to div width?

    How to make a css compatible by all browser

    How to use px and % in the same layout like this

    How to hide a parent div if an inner div has a certain class, with javascript

    How to add new line in a Bootstrap button using CSS

    How to perfectly center contents in an unordered list?

    CSS\HTML - How to add Ionicons to CSS “content” property?

    How to make a central background over the page in HTML/CSS?

    How can I make an element fit to fill the right part of the window?

    Webpage Css Error.. Not Showing Anything

    how to apply vertical-align: middle at div

    How to increase spacing between dt tags

    How do I get the boxes to align underneath each other when the screen shrinks (responsive)

    How to create this type of window,as described in the attached picture with HTML,CSS? [closed]

    How to transition overlay menu on clicking button

    How to create a dotted shadowy effect on an image with CSS?

    Odd visual effect (little line shows) when hovering over button in browser

    How can i make my paragraph go to the next line after a certain width

    how to create sprite with css [closed]

    Shows a dropdown element with jQuery

    How to remove CSS underline?

    How to make a simple timer image slideshow using HTML and CSS