CSS 设置文字只显示一行,多余显示省略号

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:925篇文章
  • 发布时间:2023年07月04日 18:02:16
  • 所属分类:CSS, html, WEB前端
  • 阅读次数:300次阅读
  • 标签:

CSS 设置文字只显示一行,多余显示省略号

.view-text{
  /**
    思路:
    1.设置inline-block属相
    2.强制不换行
    3.固定高度
    4.隐藏超出部分
    5.显示“……”
  */
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
}

显示两行

<div class="text2">css指的是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言,是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</div>

/**
思路:
    1.超出的文本隐藏
    2.溢出用省略号显示
    3.溢出不换行
    4.将对象作为弹性伸缩盒子模型显示
    5.从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
    6.这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数
  */
  .text2{
    width:200px;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!