css - form - ¿Cómo evitar el desbordamiento de texto en twitter bootstrap?

popover de bootstrap

Question

Soy nuevo en Twitter Bootstrap. Escribí el siguiente 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>

El CSS para la clase hideOverflow es:

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

Pero me está mostrando el resultado como:

Luego cambié ''row-fluid'' a span12 y luego está mostrando el siguiente resultado:

¿Por qué mi clase hideOverFlow no funciona con la clase de row-fluid ?

¿Qué necesito cambiar para obtener el mismo resultado que la clase de row-fluid ?

Answer 1

Agregue el ajuste de palabras: palabra de inflexión en su DIV. Escribe esto:

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

Answer 2

No está usando fluido de fila en el lugar correcto, por eso está viendo el problema. Row-fluid crea una fila dentro de la cual puede crear columnas usando clases de tramo, y como el porcentaje de uso de fluido de fila se expandirá para llenar todo el espacio horizontal disponible en una pantalla grande y contraer columnas para evitar que se apilen verticalmente como la pantalla redimensiona

Por lo tanto, el principio básico es usar fila líquida de esta manera:

<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>

Por eso, cuando eliminaste el fluido de fila y lo reemplazaste con span12, tu problema se resolvió. También la mejor práctica es asignar span con una clase con propiedad de ancho: 100%, como:

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

Entonces úsalo en tu código como:

  <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>

Evite usar span12 dentro de un span4.

Answer 3

Por supuesto, el título de la pregunta es amplio ... dependerá de la estructura de Bootstrap la que estés trabajando, ya que puede tener reglas CSS que pueden interferir con tu código.

En mi situación, tengo una estructura con row-fluid , span# sy label CSS clases como esta:

<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>

Aprovechando el código proporcionado por SaurabhLP utilicé esta versión SaurabhLP CSS que lo hizo por mí:

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

Coloca correctamente una ellipsis en el texto dentro del span cuando el título es muy largo.

Como ventaja: si quieres hacer que el texto se rompa, entonces puedes probar este CSS lugar:

.standard-description {

    white-space:pre-line;

}

Answer 4

hacer la estructura html así ...

<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>

El CSS: -

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