Wie vermeidet man Textüberlauf in Twitter Bootstrap?

Question

Ich bin neu bei Twitter Bootstrap. Ich schrieb folgende 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> 

Die CSS für die hideOverflow Klasse:

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

Aber es zeigt mir das Ergebnis als:

Dann habe ich 'row-Flüssigkeit' geändert span12 und dann zeigt es das folgende Ergebnis:

Warum funktioniert meine Klasse hideOverFlow nicht mit der Klasse row-fluid?

Was muss ich ändern, um das gleiche Ergebnis wie die Klasse row-fluid zu erhalten?

Answer 1

machen die HTML-Struktur wie folgt ...

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

Die CSS: -

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

Answer 2

Add word-wrap: break-word in Ihrem DIV. Schreiben Sie diese:

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

Answer 3

Sie verwenden nicht Zeile-Flüssigkeit an der richtigen Stelle, deshalb sehen Sie das Problem. Row-fluid erstellt eine Zeile, in der Sie Spalten mithilfe von Spannungsklassen erstellen können. Da Row-Fluid prozentual verwendet wird, wird der gesamte horizontale Speicherplatz auf einem großen Bildschirm erweitert und die Spalten so verkleinert, dass sie nicht wie der Bildschirm übereinander gestapelt werden ändert die Größe.

So ist das Grundprinzip ist row-Flüssigkeit auf diese Weise zu verwenden:

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

Das ist, warum, wenn Sie Zeilen Flüssigkeit entfernt und ersetzt es mit span12 Ihr Problem gelöst wurde. Auch die beste Praxis ist Spannweite mit einer Klasse mit Eigenschaft der Breite zuzuweisen: 100%, wie:

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

verwenden Sie es dann in Ihrem Code wie:

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

Vermeiden Sie span12 in einem span4 .

Answer 4

Natürlich ist die Frage Titel ist breit ... es auf Bootstrap ‚s Struktur abhängen werden Sie gerade arbeiten, da es CSS-Regeln haben, die mit Ihrem Code stören können.

In meiner Situation habe ich eine Struktur mit row-fluid, span# s und label CSS-Klassen wie folgt aus:

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

Vorteil der durch SaurabhLP bereitgestellten Code Taking benutzte ich diese CSS Version verkürzen, die es für mich getan hat:

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

Sie stellt richtig ein ellipsis im Text innerhalb der span, wenn der Titel sehr lang ist.

Als Plus: wenn Sie den Text Bruchlinie machen wollen, dann können Sie diese CSS stattdessen versuchen:

.standard-description { 

    white-space:pre-line; 

}