css实现多行文本溢出隐藏的方法

这篇文章将为大家详细讲解有关css实现多行文本溢出隐藏的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在css中,可使用溢出属性来实现多行文本溢出隐藏,只需要给文本元素添加“溢出:隐藏;”样式即可.overflow属性规定当内容溢出元素框时发生的事情,当值设置为“隐藏”时,会设置溢出部分不可见。

在css中,可使用溢出属性来实现多行文本溢出隐藏。

溢出属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。属性值:

<李>

隐藏:内容会被修剪,并且其余内容是不可见的。

<李>

滚动:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

<李>

汽车:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

如果值为滚动,不论是否需要,用户代理都会提供一种滚动机制,因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style 类型=拔谋?css"比; 　　div  { 　　背景颜色:粉色; 　　宽度:150 px; 　　身高:150 px; 　　溢出:隐藏 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。;/p> 　　 　　& lt; div> 　　这个属性定义溢出元素内容区的内容会如何处理。如果值为,滚动,不论是否需要, 　　用户代理都会提供一种滚动机制,因此,有可能即使元素框中可以放下所有内容也会出现滚动条。 　　默认值是可见的。 　　& lt;/div> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

直接隐藏溢出部分是不是不好看,我们可以将溢出部分隐藏并显示省略号:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=癠TF-8"祝辞 　　& lt; title> CSS如何使文本溢出部分显示省略号?多行超出& lt;/title> 　　& lt; style> 　　*{保证金:0 px;填充:,0 px;} 　　.box { 　　宽度:280 px; 　　身高:62 px; 　　保证金:50 px 汽车; 　　溢出:隐藏; 　　文本溢出:省略; 　　显示:-webkit-box; 　　-webkit-line-clamp: 3; 　　-webkit-box-orient:垂直的; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div 类=癰ox"祝辞 　　css 实现多行文本超出长度显示省略号,css 实现多行文本超出长度显示省略号, 　　css 实现多行文本超出长度显示省略号 　　& lt;/div> 　　& lt;/body> 　　& lt;/html>

效果图:

这种方法只有WebKit内核才有作用,而移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;

-webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(不支持的WebKit属性),它没有出现在css规范草案中,

显示:-webkit-box将对象作为弹性伸缩盒子模型显示;

-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式;

文本溢出:省略号以用来多行文本的情况下,用省略号”…“隐藏超出范围的文本。

关于“css实现多行文本溢出隐藏的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

css实现多行文本溢出隐藏的方法