How do I get text to wrap to not break out of the box using CSS?


Tags: html,css,html5

Problem :

I have HTML elements like this:

<li class="store-display-item">
    <div class="store-display-item">
        <img class="store-display-image" src="/Images/ToughBook.jpg">
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>

Styled like this:

.store-display-item
{
    display: inline;
    width: 100px;
    max-width: 100px;
    word-wrap: break-word;
    margin-right: 10px;
}

.store-display-image
{
    max-width: 100px;
    max-height: 70px;
}

Yet the <p>QuickTrav Carbon Footprint</p> renders at nearly 140px, causing my intended adjacent blocks to flow to the next row. How can I get the text to wrap and not exceed the max width of its container?



Solution :

That inline is causing it. Remove the class from the inner div, and add the following:

.store-display-item div { width: 100px; }

<li class="store-display-item">
    <div>
        <img class="store-display-image" src="/Images/ToughBook.jpg">
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>​

    CSS Howto..

    How to achieve this complex layout with CSS?

    How to make CSS visible only for Android phone UC browser

    How do I vertical center text next to an image in html/css?

    How to change font on css?

    How to include css in my JSP?

    how to make yo angular load bootstrap theme css

    Third level drop down css wont show & content/links are out of order?

    How to combine components in HTML header

    Please help me understand how to make my first jquery slider

    How to change Jquery terminal cursor shape? I want it to be '|' not a block

    Show/Hide function between JS, CSS, and HTML

    How to extend a div's width beyond its wrapper?

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How can apply multiple background color to one div

    How to shade every other table row that spans across multiple rows?

    jquery hide/show list elements from ul

    How do I set up the Zurb Foundation icons?

    How to select an element's great-grandchild for CSS rules?

    How can I stretch an empty floating div to the full height available using css?

    How avoid zurb founction styles from overriding jqgrid/jquery ui styles?

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    How to correct Div overlapping?

    How to remove “padding” from ionic card

    How to link after the CSS-Animation?

    How do I design a css gradient to look like the attached Facebook Login screen

    Using CSS how best to display name value pairs?

    How do I add HTML files to a GitHub repo?

    popup mask is very very quickly shown

    background image of div element can't show in php file