CSS只顯示一行

一、CSS只顯示一行文字

CSS只顯示一行文字可以通過如下代碼實現：

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

該代碼的作用是強制只顯示一行文字，並將溢出部分隱藏，同時在末尾以省略號作為提示。

同時，我們也可以通過如下代碼調整省略號位置：

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
  position: relative;
}

.one-line::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}

該代碼會在末尾加入省略號，並通過定位使其位於文字後面，同時可以通過 padding-right 調整省略號與文字之間的距離。

二、CSS讓只顯示兩行

如果我們需要讓文本只顯示兩行，可以使用如下代碼：

.two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

該代碼使用了 -webkit-box 和 -webkit-line-clamp 屬性以及 overflow 屬性，具體作用為：在一個塊元素中作為伸縮盒子顯示，並限制只顯示兩行文字，並設置為豎直方向顯示內容，超出部分隱藏。

三、CSS一行顯示

如果我們需要讓文本只顯示為一行，可以使用如下代碼：

.one-line {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

該代碼使用 display 屬性設置為行內塊，並通過 white-space 屬性和 overflow 屬性使其只顯示為一行，同時末尾以省略號作為提示。

四、CSS行內顯示

如果我們需要讓文本以行內元素顯示，可以使用如下代碼：

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

該代碼使用 display 屬性設置為行內元素，並通過 white-space 屬性和 overflow 屬性使其只顯示為一行，同時末尾以省略號作為提示。

五、CSS多行顯示

如果我們需要讓文本多行顯示，可以使用如下代碼：

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

該代碼使用了 -webkit-box 和 -webkit-line-clamp 屬性以及 overflow 屬性，具體作用為：在一個塊元素中作為伸縮盒子顯示，並限制只顯示三行文字，並設置為豎直方向顯示內容，超出部分隱藏。