comment éviter le dépassement de texte dans twitter bootstrap?

Je suis nouveau sur Twitter Bootstrap. J'ai écrit HTML suivant:

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

La CSS pour la hideOverflow classe est:

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

Mais il me montre le résultat que:

Puis j'ai changé "row-fluid" pour span12 et puis c'est montrer le résultat suivant:

Pourquoi mon hideOverFlow classe de ne pas travailler avec l' row-fluid classe?

De quoi ai-je besoin de changer afin d'obtenir le même résultat que la row-fluid classe?

je pense que réduire la taille de la div ou appliquer padding-right pour elle... aussi supprimer la ligne fluide-il pas de sens pour l'appliquer...

InformationsquelleAutor Priyanka | 2013-03-09

15

faire la structure html comme ceci...
```
<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>
```
Le CSS:-
```
.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}
```
- j'ai d'autres éléments span dans le div parent. Donc je ne peux pas utiliser votre suggestion.
- chose principale est que vous devez fournir le texte de dépassement de conteneur que ce soit un span ou div avec une certaine largeur... peut-être en %... voir les mises à jour...
- Pourquoi devrait-il être appliqué directement sur la plage? J'ai essayé de l'appliquer sur les div, mais qui ne fonctionne pas.
InformationsquelleAutor SaurabhLP
4

Bien sûr la question du titre est large... ça dépend de Bootstrap's de la structure, vous travaillez avec des car il peut avoir des règles CSS qui peut interférer avec votre code.

Dans ma situation, j'ai une structure avec row-fluid, span#s et label classes CSS comme ceci:
```
<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>
```
Profitant du code fourni par SaurabhLP j'ai utilisé cette raccourcir CSS version qui l'a fait pour moi:
```
.standard-description {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
}
```
Il place correctement un ellipsis dans le texte à l'intérieur de la span lorsque le titre est très long.

Comme un plus: si vous voulez rendre le texte de saut de ligne, alors vous pouvez essayer cette CSS à la place:
```
.standard-description {

    white-space:pre-line;

}
```
- white-space: nowrap;
InformationsquelleAutor Leniel Maccaferri
2

Vous n'êtes pas à l'aide de la ligne de liquide dans le bon endroit , c'est pourquoi vous voyez le problème. La ligne fluide crée une ligne à l'intérieur de laquelle vous pouvez créer des colonnes à l'aide de durée de classes , et depuis la ligne de liquide utilise pourcentage, il sera étendu à remplir tout l'espace horizontal disponible sur un grand écran, et rétrécir les colonnes pour les empêcher de s'empiler verticalement comme l'écran est redimensionné.

De sorte que le principe de base est d'utiliser la ligne fluide de cette façon :
```
<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>
```
C'est pourquoi, lorsque vous avez supprimé la ligne fluide et l'a remplacé par span12 votre problème a été résolu .
Aussi la meilleure pratique consiste à attribuer span avec une classe avec des biens de width :100% , comme :
```
.text-span{
         {
    width: 100%;
  }
```
Ensuite l'utiliser dans votre code comme :
```
  <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>
```
Éviter d'utiliser span12 à l'intérieur d'un span4 .

InformationsquelleAutor Shail
1

Ajouter word-wrap: break-word dans votre DIV. Écrire ceci:
```
.span4{
    width: 700px;
    word-wrap: break-word;
}
```
InformationsquelleAutor Amrendra

Vous devez vous connecter pour publier un commentaire.