【CSS随笔】white-space 属性、文本溢出隐藏

最新推荐文章于 2023-02-27 13:35:09 发布

翘阳啦

最新推荐文章于 2023-02-27 13:35:09 发布

阅读量458

点赞数 3

分类专栏： HTML+CSS 文章标签： css3 html 前端

本文链接：https://blog.csdn.net/qiaoyangla/article/details/124730469

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS来实现单行和多行文本溢出时的隐藏，并展示不同white-space属性值的效果，帮助理解如何控制文本换行和显示省略号。重点讲解了`display`、`white-space`、`overflow`和`text-overflow`属性的配合使用。

摘要由CSDN通过智能技术生成

文本溢出隐藏

/* 单行文本溢出隐藏，省略号代替 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 


  /* 单行文本溢出隐藏，省略号代替 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;  /*设置对齐模式*/
  -webkit-line-clamp: 2;   /*设置多行行数*/

white-space空格处理

white-space:nowrap会导致不换行，经常和overflow、text-overflow一起使用。

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。