如何避免twitter引導中的文本溢出？

我是Twitter Bootstrap的新手。我寫了下面的HTML：如何避免twitter引導中的文本溢出？

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

但它顯示我結果爲： enter image description here

然後，我改變了 '行流體' 來span12然後它顯示以下結果：

enter image description here

爲什麼我的hideOverFlow類不能與row-fluid類一起使用？

爲了得到與row-fluid類相同的結果，我需要改變什麼？

來源

2013-03-09 Priyanka

我認爲減少該分區的大小或應用填充右它...也刪除行流體它沒有意義應用它... – SaurabhLP 2013-03-09 07:10:21

使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; 
}

來源

2013-03-09 07:14:39 SaurabhLP

我有父div的其他跨度元素。所以我不能使用你的建議。 – Priyanka 2013-03-09 07:22:22

主要的是，你必須提供文本溢出容器，無論它的跨度或div有一些寬度...可能在％...看到更新... – SaurabhLP 2013-03-09 07:25:29

爲什麼它應該直接應用到跨度？我試圖將它應用於div，但這不起作用。 – 2018-01-20 05:53:13

添加自動換行：打破字在你的DIV。寫這個：

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

來源

2013-03-09 07:15:53 Amrendra

你沒有在正確的地方使用排液，這就是爲什麼你看到的問題。行流體創建一個行，您可以在其中使用跨度類創建列，並且由於行流體使用百分比，它將展開以在大屏幕上填充所有可用的水平空間，並縮小列以防止它們垂直堆疊爲屏幕調整大小。

所以基本原理是利用排液是這樣的：

<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你的問題就解決了。也是最好的做法是與寬度的屬性的類分配跨度：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內。

來源

2013-03-09 07:56:11 Shail

當然問題標題很廣泛......它將取決於您正在使用的Bootstrap的結構，因爲它可能具有可能干擾您的代碼的CSS規則。

在我的情況我有一個結構row-fluid，span# S和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; 

}

來源

2013-06-22 16:59:40

white-space：nowrap; – rleffler 2015-08-06 15:19:51

在自舉柵格上工作，非常感謝 – blamb 2017-07-20 17:26:33

如何避免twitter引導中的文本溢出？

回答

相關問題