在网页开发中,常常会遇到文本超出了限定的范围,尤为是屏幕尺寸的大小致使的,着实影响美观,这个时候,就须要用css对其进行处理。
下面的方法是我在实际工做中总结出来的,给你们参考一下。css
2018-9-11 by yl 这是在实际应用中遇到的一个新的需求,就是指定文本行数,若是超出就用省略号代替 .content{ /*设置文本为多行,若是超出长度用省略号代替*/ width: 200px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/ -webkit-box-orient: vertical; overflow: hidden; }
(1)用省略号代替超出的部分,这个就是高度、宽度都受到限制的时候适用(是我比较喜欢的一种)web
text-overflow:clip 修剪文本|ellipsis 显示省略符号来表明被修剪的文本|string 使用给定的字符串来表明被修剪的文本。 .content { width: 80%; height: 40px; padding: 5px; **overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; white-space: nowrap; /*规定段落中的文本不进行换行*/** }
须要将三者结合使用,达到想要的效果:浏览器
(2)超出部分换行,在单词过长,高度不受限制时适用布局
word-break: normal 默认的|break-all 在单词内换行|keep-all 只能在半角空格或连字符处换行; p { width: 160px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; **word-break: break-all;** }
(3)因为绝对定位或者其余状况,致使的标题盖住连接的,能够采用flex布局flex
.word-secondli { display: flex; flex-wrap: wrap;/*换行,第一行在上*/ justify-content: space-between;/*两端对齐,项目间隔相等*/ align-items: center;/*居中对齐*/ border-bottom: 1px solid #ccc; } <div class="word-secondli"> <h3>在网页开发中,常常会碰到在一些场景</h3> <a href="#">click me</a> </div>
这样,标题过长的没地儿放下连接的时候,连接会自动换行。spa
以上就是我能想到的方法,若是有什么不足的地方,欢迎指教。code
再补充一条,好比想让内容在第二行的时候,超出部分隐藏: { width: 100%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-inline-box; }
这个处理方式的目前只兼容webkit内核的浏览器(其余方法看法说二):orm