css怎么设置超出几行显示省略号?

摘要:CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。下面我们来看一下css如何设置文本超出几行显示省略号。

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。下面我们来看一下css如何设置文本超出几行显示省略号。

css设置超出几行显示省略号:


1、单行文本

使用text-overflow:ellipsis属性

text-overflow: clip|ellipsis|string;

clip:修剪文本。

ellipsis:显示省略符号来代表被修剪的文本。

string:使用给定的字符串来代表被修剪的文本。

示例:

css:

p{
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
    width: 250px;/*需要配合宽度来使用*/
    border: 1px solid red;
    font-size: 30px;
}

html:  

<p>单行文本超出部分显示省略号我是mdzz</p>


2、多行文本显示省略号,省略号在段尾

p{ 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  width: 250px;
  border: 1px solid red;
  font-size: 30px; 
}

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。

常见结合属性:

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_9181