Batman Batman - 1 month ago 7
CSS Question

Prevent text from wrapping under icon

I'm trying to create a list of items and each item needs to have an icon on the left. For long named items the text is wrapping under the icon. How do I prevent this from happening?

Below in the image you can see the text "Created" is going under the file icon:

enter image description here

I'm using bootstrap and this is how I'm creating each item:

var renderActivity = function(a) {
var html = "";
html += "<a title='" + a.title + "' href='" + a.path +"' class='list-group-item clearfix" + a.type + "'>";
html += "<span class='glyphicon glyphicon-"+a.icon+" pull-left fa-3x'></span>";
html += "<div>";
html += "<h3 class='list-group-item-heading'>" + a.type + ": " + a.title + "</h3>";
html += "Created: " + a.created
html += "</div>";
html += "</a>";

return html
}

Answer

You have to float: left the div after the p tag. What is currently hapening is how a floating element is expected to behave with simple text surrounding it. Just like images in newspaper are floated to left and right and the text goes sideways to the images and then passes below the image when the runs of text extends below the image.

What you have to do is also float the div after the p tag. But to make it float you will have to give it specific width too. The following code should solve your problem:

    a {
        display: block;
        float: left;
        max-width: 400px;
        border: 1px solid cyan;
        padding: 2px;
    }
    
    a > p {
        float: left;
        border: 1px dotted green;
        margin-right: 2px;
    }
    
    a > div {
        float: left;
        max-width: 350px;
        border: 1px dotted red;
    }
       <a href="">
            <p>
                <img src="https://i.stack.imgur.com/8lMxs.png" width="24" height="24" alt="">
            </p>
            <div>
                <span>
		      <h3>File my gcr labour relations, greiviences, improvements and desiplnies and on and on</h3>
		       Created: monday morning for al of em.
		</span>
            </div>
        </a>

P.S: If you are using bootstrap then I'd suggest to use media object in these scenarios. They use tables layout for, may be, better old browser compatibly.

Comments