您的位置:首页 > 教程笔记 > 前端笔记

css怎么让文字标题超出宽度后自动省略号结尾的写法

2023-11-29 20:56:25 前端笔记 192

在CSS中,为了让一个标题在超出宽度后显示省略号(...),你可以使用以下的样式规则:

overflow: hidden; - 确保超出元素盒子宽度的内容被隐藏。
text-overflow: ellipsis; - 当文本溢出时,显示省略号(...)。
white-space: nowrap; - 防止文本换行,确保省略号显示在一行的末尾。
这些样式通常应用于标题的容器元素,例如一个<div>或<span>标签。下面是一个示例:

.title {
  width: 250px; /* 需要设置一个固定宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

然后在HTML中使用这个类:

<div class="title">这是一个很长的标题,当它超出宽度时会显示省略号</div>

相关推荐