如何設定顯示省略號之外的多行文字

通常的做法是這樣的：

hidden;

ellipsis;

3.-o-text-overflow:ellipsis;

nowrap;

**如下：li

white-space：nowrap;指示文字不換行並繼續在同一行上，知道遇到它。

標籤到現在; overflow：hidden;如果您不顯示任何超過物件大小的內容，則隱藏多餘的部分;

text-overflow：ellipsis;當顯示文字物件溢位時。 當然，您也可以將屬性設定為剪輯而不是顯示點;

o-text-overflow：Opera 的省略號; 寬度主要針對IE6設定;

此方法支援 Internet Explorer、Safari、Chrome 和 Opera，但 FF 不支援，但使用 JQUERY 可以達到類似的效果。

呼叫方法：1$(document).ready(function()

單行文字實現：

效果：多行文字溢位顯示省略號實現：

功效： 適用範圍：

由於使用了 WebKit 的 CSS 擴充套件屬性，該方法適用於 WebKit 瀏覽器和移動端。

通常的做法是這樣的：

1、white-space:nowrap;

2、width:100%;

3、overflow:hidden;

4、text-overflow:ellipsis;

5、-o-text-overflow:ellipsis;

這也可以通過新增 -webkit-line-clamp 的私有屬性來完成，該屬性用於限制塊元素中顯示的文字行數。 為了做到這一點，它需要組合其他 webkit 屬性：

display： -webkit-box 將物件顯示為自動鏡框模型;

webkit-box-orient 設定或檢索伸縮框物件的子元素的排列;

text-overflow：省略號與省略號“....“隱藏超出範圍的文字。

overflow : hidden;text-overflow: ellipsis;display:

webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

首先，您需要為儲存文字的容器設定乙個固定的寬度和高度，然後新增以下屬性 white-space： nowrap;

word-break: keep-all;

text-overflow: ellipsis;

第一行的 ** 不允許換行文字。

第二行中的**不允許將單詞拆開。

風格控制也可以實現，家庭療法。

首先，這個多行是高度寬度。

固定，例如高度為100; 寬度 200

這是內容，這是內容，這是內容，這是內容，這是內容，這是內容，這是......這種方法隱藏了多餘的文字，其實文字不會少，但是使用者看到的符號比省略號多，所以優點是使用SEO，缺點是當沒有足夠的文字時，就會暴露出來。

我可以肯定地告訴你，使用CSS製作多行帶有省略號的文字並與所有瀏覽器相容是不可能的。

我還想使用 CSS 來控制省略號表示的多行超標，如果你願意的話，CSS 可以教我。 如果沒有，我可以教你如何用js或jquery解決你的問題。

它總是根據字元數動態截斷，或者使用 js; 純CSS做不到。

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

首先，只看它的寬度，然後把上面的屬性複製進去。