css文字单行省略与css文字多行省略以及html长数字和长单词

最新推荐文章于 2025-05-27 23:18:44 发布

原创最新推荐文章于 2025-05-27 23:18:44 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5

html与css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS实现单行和多行文本的省略显示，包括nowrap属性控制不换行，text-overflow和overflow属性控制文本溢出，以及word-break属性处理长单词。还重点讲解了多行文本的line-clamp属性应用。

一、单行文字省略号显示

withe-space：nowrap ：不换行

text-overflow：ellipsis ：超出文本省略显示

over-flow：hidden ：超出隐藏

withe-space：nowrap ：不换行

text-overflow：ellipsis ：超出文本省略显示

over-flow：hidden ：超出隐藏

二、多行文本省略显示

display: -webkit-box;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;//控制行数
-webkit-box-orient: vertical;

display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;//控制行数
  -webkit-box-orient: vertical;

三、长单词和长数字

长单词和长数字会默认换行显示，word-break：break-all 可以让其不换行