CSS只显示一行

LBWLA • 2025-02-05 13:05 • 编程

一、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 属性，具体作用为：在一个块元素中作为伸缩盒子显示，并限制只显示三行文字，并设置为竖直方向显示内容，超出部分隐藏。

原创文章，作者：LBWLA，如若转载，请注明出处：https://www.506064.com/n/334232.html