Как избежать переполнения текста в twitter bootstrap?

Я новичок в Twitter Bootstrap. Я написал следующий HTML:

<div class="span4">
   <span class="row-fluid hideOverflow">
   @Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })
   </span>
</div>

CSS для класса hideOverflow:

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

Но он показывает мне результат как:

Затем я изменил 'row-fluid' на span12, а затем он показал следующий результат:

Почему мой класс hideOverflow не работает с классом row-fluid?

Что мне нужно изменить, чтобы получить тот же результат, что и класс row-fluid?

Ответ 1

создайте структуру html следующим образом:

<div class="span4">
   <span class="hideOverflow">@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })</span>
</div>

CSS: -

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}

Ответ 2

Конечно, заголовок вопроса является широким... он будет зависеть от структуры Bootstrap, с которой вы работаете, поскольку у нее могут быть правила CSS, которые могут помешать вашему коду.

В моей ситуации у меня есть структура с row-fluid, span# и label классами CSS, такими как:

<div class="row-fluid">    
    <div class="span12">
        <div id="standard-placeholder" style="display: none;">
            @Html.Label(Localization.Title)
            <span class="label label-warning standard-description"></span>
        </div>
    </div>
</div>

Воспользовавшись кодом, предоставленным SaurabhLP, я использовал эту сокращенную версию CSS, которая сделала это для меня:

.standard-description {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
}

Он правильно помещает ellipsis в текст внутри span, когда заголовок очень длинный.

В качестве плюса: если вы хотите сделать строку разрыва текста, вы можете попробовать вместо этого CSS:

.standard-description {

    white-space:pre-line;

}

Ответ 3

Вы не используете жидкую жидкость в правильном месте, поэтому вы видите проблему. Row-fluid создает строку, внутри которой вы можете создавать столбцы с использованием классов span, а так как процент использования строки-жидкости будет расширяться, чтобы заполнить все доступные горизонтальные пространства на большом экране и уменьшить столбцы, чтобы они не могли вертикально укладываться в качестве экрана изменение размера.

Таким образом, основной принцип заключается в том, чтобы использовать струйную жидкость таким образом:

<div class="row-fluid">
   <div class="span4">
     <span class="hideOverflow">@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })</span>
      </span>
   </div>
</div>

Вот почему, когда вы удалили строку-жидкость и заменили ее на span12, ваша проблема была решена. Также наилучшей практикой является присвоение span классу с свойством width: 100%, например:

.text-span{
         {
    width: 100%;
  }

Затем используйте его в своем коде, например:

  <div class="row-fluid">
      <div class="span4">
         <span class=" text-span hideOverflow">@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })</span>
      </span>
   </div>
</div>

Избегайте использования span12 внутри span4.

Ответ 4

Добавьте слово-обертку: слово break в вашем DIV. Напишите это:

.span4{
    width: 700px;
    word-wrap: break-word;
}