css超出换行(css内容超出三个点显示)

  文字单行溢出:

image.png

  overflow: hidden;            // 溢出隐藏

  text-overflow: ellipsis;      // 溢出用省略号显示

  white-space: nowrap;         // 规定段落中的文本不进行换行

  复制代码

  多行文字溢出:

  overflow: hidden;            // 溢出隐藏

  text-overflow: ellipsis;     // 溢出用省略号显示

  display:-webkit-box;         // 作为弹性伸缩盒子模型显示。

  -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列

  -webkit-line-clamp:3;        // 显示的行数

  文字溢出可以使用此属性(Text Overflow )截断溢出的文本。指在文本超出元素宽度时,自动隐藏超出部分的文本。在 CSS 中,可以使用 text-overflow 属性来实现这种效果。可以使用省略号 (...) 或自定义字符串对其进行截取缩略显示。

  下面是一个简单的代码示例:

  .overflow-ellipsis {

  width: 100px; /* 定义元素的宽度 */

  white-space: nowrap; /* 防止文本换行 */

  overflow: hidden; /* 隐藏超出部分 */

  text-overflow: ellipsis; /* 添加省略号来指示隐藏的文本 */

  }


发表评论

评论列表

还没有评论,快来说点什么吧~