css怎麼設定文字1行-css教學-PHP中文網

css怎麼設定文字1行

藏色散人

發布： 2023-02-17 15:23:41

原創

13910 人瀏覽過

css設定文字1行的方法：1、為文字元素設定「display: inline-block;」樣式，讓其轉換為行內塊元素；2、給文字元素「white-space: nowrap; 」樣式實作文字強制不換行；3、給文字元素設定「overflow: hidden;text-overflow:ellipsis;」樣式實現隱藏超出部分即可。

css怎麼設定文字1行

本教學操作環境：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	如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。