How to make the content of a span wrap onto the next line in an embedded


Tags:
html,css

Problem :

I have the following situation:

<li style="width:100px">    <!--display:block-->
    <a href="...">          <!--display:block-->
        <span>Link text Which is longer than 100px</span><!--display:inline-->
    </a>
</li>

At the moment the long text is expanding beyond the outer limits of the <li> but I would like it to wrap onto a second line.

How can I achieve this with css?



Solution :

You would use word-break: break-all to achieve this.

EXAMPLE HERE

span {
    word-break: break-all;
}

    CSS Howto..

    How to remove a specific (bottom) border from p:row in p:panelGrid?

    How to make a background-color transition that eventually covers div to center? [closed]

    How do I focus image from the center (CSS focus)?

    How to generate a source map for minified CSS generated by dotless

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    how to disable drupal7 system css files?

    How to slide an element without removing it from DOM ( A psudo slide maybe)?

    How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

    How to correctly switch images with javascript?

    How to Apply CSS to element added by Javascript

    How to add bold text with CSS? [duplicate]

    How to make to border-bottom line longer with CSS

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    How to style radio button or checkbox inside a bootstrap table?

    Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

    How to highlight syntax inside
    tag?

    CSS - How to remove whitespace between anchored images

    how to get value of colors from CSS

    CSS: How to change tooltip position to align to triggering element (rest of code working)

    How to hide ads with media queries?

    How to get background image from internal css using xpath?

    CSS - How to select nth-child of form element?

    how to simplify font import in css

    How to include the PHP file that is outside the folder where main PHP file exists?

    codaSlider hack - how do I add little triangles overlaying an image

    CSS- how to give an object with scooped corners a border colour?

    How to apply transition on div movement when upper disappears?

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    How to add next / previous buttons to Surface tablet touch-slideshow?

    How do I change the Mailchimp subscribe button color using inline CSS?