css設定文字1行的方法：1、為文字元素設定「display: inline-block;」樣式，讓其轉換為行內塊元素；2、給文字元素「white-space: nowrap; 」樣式實作文字強制不換行；3、給文字元素設定「overflow: hidden;text-overflow:ellipsis;」樣式實現隱藏超出部分即可。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS 設定文字只顯示一行，多餘顯示省略號
#CSS 設定文字只顯示一行
.view-text{
/**
思路：
1.设置inline-block属相
2.强制不换行
3.固定高度
4.隐藏超出部分
5.显示“……”
*/
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}附：顯示兩行
<div class="text2">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>
/**
思路：
1.超出的文本隐藏
2.溢出用省略号显示
3.溢出不换行
4.将对象作为弹性伸缩盒子模型显示
5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
*/
.text2{
width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}屬性樣式說明：
#display 屬性可以決定該元素在串流佈局中的表現(塊級或內聯元素);
display: block;表示這個元素是塊級元素，垂直顯示，寬度自動撐滿，可以設置寬高。
display: inline;表示這個元素是內嵌元素，並排顯示，寬度自動收縮，無法設定寬高。
display:inline-block;表示這個元素是內聯區塊，既可以設定寬高又可以並排顯示。
white-space屬性
white-space屬性指定元素內的空白如何處理。
| 值 | 描述 |
|---|---|
| #normal | 預設。空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 標籤。 |
| nowrap | 文字不會換行，文字會在同一行上繼續，直到遇到 標籤為止。 |
| pre-wrap | 保留空白符號序列，但正常地進行換行。 |
| pre-line | 合併空白符號序列，但保留換行符號。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
overflow屬性
overflow屬性指定如果內容溢出一個元素的框，會發生什麼事。
| 值 | 描述 |
|---|---|
| #visible | 預設值。內容不會被修剪，會呈現在元素框外。 |
| hidden | 內容會被修剪，並且其餘內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。 |
text-overflow屬性
text-overflow 屬性指定當文字溢位包含它的元素時，應該如何顯示。可以設定溢出後，文字被剪下、顯示省略號 (...) 或顯示自訂字串（不是所有瀏覽器都支援）。
| 值 | 描述 |
|---|---|
| #clip | 剪下文字。 |
| ellipsis | 顯示省略符號 ... 來代表被修剪的文字。 |
| string | 使用給定的字串來代表被修剪的文字。 |
text-overflow 需要配合以下兩個屬性使用：
white-space: nowrap;
overflow: hidden;
#【推薦：css影片教學】
以上是css怎麼設定文字1行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
