防止文字在图标下换行

Question

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:

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 1

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> 

PS: 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.

Answer 2

There are a lot of solutions. One way:

https://jsfiddle.net/4r9fwwys/

 .txt-part{ float: left; padding: 0 0 0 10px; display: inline-block; } .glyphicon { float: left; font-size: 30px; display: inline-block; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <a title="title" href="path" class="list-group-item clearfix type"> <span class="glyphicon glyphicon-open pull-left fa-3x"></span> <div class="txt-part"> <h3 class="list-group-item-heading"> type:title </h3> <span class="created">created</span> </div> </a> <a title="title" href="path" class="list-group-item clearfix type"> <span class="glyphicon glyphicon-remove pull-left fa-3x"></span> <div class="txt-part"> <h3 class="list-group-item-heading"> type:title </h3> <span class="created">created</span> </div> </a> 

Down side of this - can become ugly on long content or small screen. But at least for small screen You could add one more class to that icon span - hidden-xs (hidden-xs-down for Bootstrap v4)

But I would try to place that icon in a :before style like this:

https://jsfiddle.net/f5jzeksm/

 a > h3, a > span { padding-left: 15px; } .created { font-size: 80%; } h3 { poaition: relative; } h3:before { font-family: 'Glyphicons Halflings'; position: absolute; left: 2px; } h3.icon-glyphicon-open:before { content: '\\e167'; } h3.icon-glyphicon-remove:before { content: '\\e014'; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <a title="title" href="path" class="list-group-item clearfix type"> <h3 class="list-group-item-heading icon-glyphicon-open"> type:title </h3> <span class="created">created</span> </a> <a title="title" href="path" class="list-group-item clearfix type"> <h3 class="list-group-item-heading icon-glyphicon-remove"> type:title </h3> <span class="created">created</span> </a>