单行截断和多行截断问题

番茄西红柿发布于2019-04-22 16:12 / 2954人阅读

摘要：成立多年来，腾讯一直秉承一切以用户价值为依归的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。

display: inline-block; // 如果不是block元素，还需要设置这个。 width: 150px; // 超出的宽度 overflow: hidden; // 超出隐藏 text-overflow: ellipsis; //超出用省略号 white-space: nowrap; // 不换行 } 多行截断：

多行截断有好几种方法，

1：最简单，使用-webkit-line-clamp ，当然了，只能用在webkit内核浏览器，并且不支持自定义点击展开的样式。

p {
 width: 400px; // 超过这个宽度
 text-overflow: ellipsis; // 使用省略号
 display: -webkit-box; // 必须使用这个
 overflow: hidden;// 必须使用，超出隐藏
 -webkit-line-clamp: 4; // 必需设置，
 -webkit-box-orient: vertical; // 设置里面元素排列顺序
 text-align: justify; // 里面问题排列方式
}

2: 也是面试中回答的方式，使用伪类。。。这个由于要使用js判断是否超出，因此适用于，你已经知道是大段文字的情景。但是面试官不是很满意这个方式，呜呜呜(ಥ _ ಥ)

p{
 position: relative;
 height: 36px; // 面试官说这个是定死的，所以不灵活。。。感觉很奇怪啊，不是死的话，怎么知道什么情况溢出？
 overflow: hidden;
 line-height: 18px; 
p::after{ // 这个是一直有省略号，所以需要js判断是否超出，如果超出的话，就加一个class。 
 content: ...;
 position: absolute;
 bottom:0;
 right: 0;
}

3：使用float，挺复杂的，不喜欢float......, 使用float时候，省略号是一个dom节点，因此可以添加事情和样式，自定义程度高！

 div 
 div 腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承 一切以用户价值为依归 的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。 /div 
 div /div 
 div ...更多 /div 
 /div

其中standard是一个标准，超过它的高度时候，就会显示省略号，container是个容器，超过他的最大高度，就hidden。三个div都float：right，其中content的margin-left：-standard的宽度，把standard给让出来，让standard出现在左侧。

 .container{
 max-height: 54px; // 最大高度
 overflow: hidden; // 超出隐藏
 line-height: 18px; // 方便计算几行。。
 font-size:12px;
 .container div{ // 三个元素都设置float
 float: right;
 .content{
 margin-left: -50px; // 这是第一个元素，由于他宽度是100%，所以需要给standard位置。
 width:100%;
 position:relative;
 background: hsla(229, 100%, 75%, 0.5)
 .standard{
 width: 50px; //宽度随意， 需要与上面margin-left一样
 height: 54px; // 超出这个高度会出现more元素
 position:relative;
 color:transparent;
 background: hsla(334, 100%, 75%, 0.5);
 .more{ 
 width:50px; // 这个元素可自定义，宽度
 height:18px;
 position: relative;
 left: 100%; // 确定位置,
 transform: translate(-100%,-100%);// 确定位置
 background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 20%, #fff); // 这是使用渐变，因为more元素会覆盖住content元素。
 }

总结：可以直接使用float方法，方便自定义样式及监听事件，并且兼容性好，是暂时最完美的解决方案。就是略复杂，不过网上有可以直接拿来用哦~

最后一个挺复杂的，看了半天，感觉网上很多，可以直接拿来用，不需要特别理解透彻，毕竟过不了几年，应该就会有内置属性了。。。

专线服务超融合服务器完美截断自动截断截断表截断文字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/780.html

单行截断和多行截断问题

摘要：成立多年来，腾讯一直秉承一切以用户价值为依归的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。单行截断： span { display: inline-block; // 如果不是block元素，还需要设置这个。 width: 150px; // 超出的宽度 overflow: hidden; //...

番茄西红柿 2019-04-23 10:16 评论0 收藏0
单行截断和多行截断问题

摘要：成立多年来，腾讯一直秉承一切以用户价值为依归的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。display: inline-block; // 如果不是block元素，还需要设置这个。 width: 150px; // 超出的宽度 overflow: hidden; // 超出隐藏 text-ove...

番茄西红柿 2019-04-22 17:02 评论0 收藏0
单行截断和多行截断问题

摘要：成立多年来，腾讯一直秉承一切以用户价值为依归的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。display: inline-block; // 如果不是block元素，还需要设置这个。 width: 150px; // 超出的宽度 overflow: hidden; // 超出隐藏 text-ove...

番茄西红柿 2019-04-22 16:34 评论0 收藏0
多余文字省略解决方案

摘要：本文将讨论单行和多行文字省略的方案，特别是多行文字的省略，不像单行省略的解决方案那么简单全面，故本文重点讨论多行文字的方案。则不显示超出容器的文字内容，若无此属性，文字会显示超过容器而不省略。总结本文介绍的多余文字省略方案，都是较为常用的。网页前端开发过程中，后端传来的文本数据长短不可控，如果接收到的文本非常长且又没有作自适应处理，页面效果会十分可怕。自适应处理在这种场景下确实很重要...

ThinkSNS 2019-08-20 14:24 评论0 收藏0
多余文字省略解决方案

摘要：本文将讨论单行和多行文字省略的方案，特别是多行文字的省略，不像单行省略的解决方案那么简单全面，故本文重点讨论多行文字的方案。则不显示超出容器的文字内容，若无此属性，文字会显示超过容器而不省略。总结本文介绍的多余文字省略方案，都是较为常用的。网页前端开发过程中，后端传来的文本数据长短不可控，如果接收到的文本非常长且又没有作自适应处理，页面效果会十分可怕。自适应处理在这种场景下确实很重要...

joy968 2019-08-30 15:52 评论0 收藏0