Запретить перенос текста под иконкой

Question

Я пытаюсь создать список элементов, и каждый элемент должен иметь значок слева. Для длинных названных элементов текст обтекает значок. Как я могу предотвратить это?

Ниже на рисунке вы можете увидеть текст «Created» происходит под значком файла:

Я использую самозагрузки и это, как я создаю каждый элемент:

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

float: leftdiv после p тег. То, что в настоящее время происходит, - это то, как floating element is expected to behave с простым текстом, окружающим его. Подобно тому, как изображения в газетах перемещаются влево и вправо, а текст идет в сторону изображений, а затем проходит под изображением, когда пробежки текста проходят под изображением.

Что вам нужно сделать, это также floatdiv после метки p. Но для того, чтобы заставить его плавать, вам придется также дать ему определенную ширину. Следующий код должен решить проблему:

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> 
 
\t \t  <h3>File my gcr labour relations, greiviences, improvements and desiplnies and on and on</h3> 
 
\t \t  Created: monday morning for al of em. 
 
\t \t </span> 
 
      </div> 
 
     </a>

P.S: Если вы используете загрузчик, то я бы предложил использовать media object в этих сценариях. Они используют табличный макет для, может быть, лучше старого браузера.

Answer 2

Существует множество решений. Один из способов:

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>

вниз сторона этого - может стать уродливым на длинном содержании или маленьком экране. Но, по крайней мере, для небольшого экрана. Вы можете добавить еще один класс к этому значку - hidden-xs (hidden-xs-down для Bootstrap v4)

Но я бы постарался поместить этот значок в: перед стилем следующим образом:

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>