主页

css 设置文本溢出容器时显示省略号

2023-11-21 08:37PM

要在文本溢出容器时显示省略号,可以使用 CSS 的 text-overflow 属性,该属性用于控制在容器中文本溢出时的显示方式。

要显示省略号,可以结合使用 text-overflow 属性和一些其他属性来实现。

eg:

.container {
  width: 200px; /* 设置容器的宽度 */
  height: 20px; /* 设置容器的高度 */
  overflow: hidden; /* 隐藏溢出的文本 */
  white-space: nowrap; /* 将文本限制在一行中 */
  text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
}

.container 类将限制文本在一行中显示,并且如果文本溢出容器,则在溢出的位置显示省略号。

注意:为了使省略号生效,容器的宽度必须小于文本的实际宽度。如果容器的宽度大于文本的宽度,将不会发生溢出,因此省略号不会显示出来。

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论