web前端入门到实战:css实现单行、多行文本超出显示省略号

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web前端入门到实战:css实现单行、多行文本超出显示省略号相关的知识,希望对你有一定的参考价值。

参考技术A

语法:

text-overflow:clip/ellipsis;
默认值:clip
适用于:所有元素
clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis: 当对象内文本溢出时显示省略标记(...)。

在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:具体值;这三个样式共同使用才会有效果。

在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

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

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

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

text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器

效果如图所示:

从效果上来看,它的优点有:

1.响应式截断,根据不同宽度做出调整
2.文本超出范围才显示省略号,否则不显示省略号
3.浏览器原生实现,所以省略号位置显示刚好

但是缺点也是很直接,因为 -webkit-line-clamp 是一个不规范的属性,它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性,像 Firefox, IE 浏览器统统都不支持这个属性,浏览器兼容性不好。

使用场景:多用于移动端页面,因为移动设备浏览器更多是基于 webkit 内核,除了兼容性不好,实现截断的效果不错。

效果如图:

适合场景:文字内容较多,确定文字内容一定会超过容器的,那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注:

css:

js:

网上有很多介绍关于使用javascript实现多行文本溢出省略的办法,有的使用插件,有的使用自己封装好的JavaScript文件,但是,我认为,还是自己写的js比较好用。

插件:

web前端入门到实战:常见CSS3选择器和文本字体样式汇总

常见的CSS3选择器包含:常用基本、属性、伪类、层级(组合)选择器,具体使用情况建议先阅读[css选择器四大类:基本、组合、属性、伪类]对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且给它添加属性样式。

常用的选择器有:标签、id、类、关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的;基本选择器有(/*代表注释*/),/*:first-child第一个元素*/,/*:last-child最后一个元素*/,/*:nth-child(n)第几个元素/,/::first-line 第一行/,/::first-letter 第一个单词/字符*/,然后层级选择器有a b后代,a>b子元素,a+b后面的元素(相邻选择器),其次伪类选择器有:hover,:focus焦点,::selection更改鼠标选择文本背景色,最后属性选择器(属性选择器的目的在于可以直接把标签身上的一种属性拿来用)有基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性~=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束。(备注说明:教程是16年的,有些选择器的名称与现在的不是很一致,建议这里的基本选择器还是按照伪类来记,有关css选择器的四大分类以之前博文为主导,有不同地方欢迎留言评论,下面是一些有意思的的样式,就写出来展示了下).

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>CSS3选择器和文本字体样式</title>
 7     <style type="text/css">
 8     div::first-line{
 9         color: #f90;
10     }/*第一行*/
11     div::first-letter{
12         font-style: italic;
13         font-size: 24px;
14     }/*第一个单词/字符*/
15     .box>li:first-child{
16         list-style: square;
17     }/*第一个元素*/
18     .box>li:last-child{
19         list-style: none;
20     }/*最后一个元素*/
21     .box>li:nth-child(3){
22         list-style: lower-roman;
23     }/*第n个元素*/
24     div::selection{
25         background-color: red;
26         color: #FFF;
27     }/*::selection更改鼠标选择文本背景色*/
28     input{
29         outline: none;
30     }/*文本聚焦,更换默认边框颜色*/
31     </style>
32 </head>
33 <body>
34     <ul class="box">
35         <li>1</li>
36         <li>2</li>
37         <li>3</li>
38         <li>4</li>
39         <li>5</li>
40     </ul>
41     <div>
42 “尽信书不如无书下一句:吾于《武成》,取二三策而已矣。出自《孟子》的《尽心章句下》, “尽信书,则不如无书” 这是精辟透脱的读书法,要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies.It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently. " 
43     </div>
44     <form action="" method="get">
45         焦点:<input type="text">
46     </form>
47 </body>
48 </html>

css3中"font"字体:/font-family:字体类型/,/font-size:字体大小/,/font-style:itailc斜体/,/font-weight: 控制字体粗细大小/,建议阅读[css常用样式font控制字体的多种变换]内容介绍基本一致。

css3对文本样式的处理常见的样式有letter-spacing:字间距,word-spacing:词间距,text-decoration:下划线,text-align:文本对齐方式,text-indent:首航缩进,line-height:行高,color:文本字体颜色,word-break:break-all文本折行。常说撞了南墙才回头,现在如果文本中恶意输入信息,比方都是这个单字母,怎么办?你会发现它在浏览器中不自动换行,而且出现底部滚动条,这个html文档展示一般从上至下,但是这个页面这样从左至右展示,怎么办?解决办法见div.box2,自行写下,浏览器展示下,印象更深,当然这种情况毕竟是少数,毕竟页面的排版还是换行来的好看,Foreigner也不例外吧!

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>有意思的word-break:break-all文本折行</title>
 7     <style type="text/css">
 8     div.box2{
 9         word-break: break-all;
10         overflow: auto;
11     }/*word-break:break-all文本折行*/
12     </style>
13 </head>
14 <body>
15     <!--默认文本都是换行的-->
16     <div class="box1">
17 “尽信书不如无书下一句:吾于《武成》,取二三策而已矣。出自《孟子》的《尽心章句下》, “尽信书,则不如无书” 这是精辟透脱的读书法,要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies. It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently. 
18     </div>
19      <!--但是像这样一些恶意输入文本的,你会发现它在浏览器中不自动换行,而且出现底部滚动条,这个html文档展示一般从上至下,但是这个页面这样从左至右展示,怎么办?解决办法见div.box2-->
20     <div class="box2">
21 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
22     </div>
23 </body>
24 </html> 

以上是关于web前端入门到实战:css实现单行、多行文本超出显示省略号的主要内容,如果未能解决你的问题,请参考以下文章

纯css实现文本内容单行/多行溢出显示省略号

css文字单行/多行超出显示省略号...

CSS中 设置( 单行多行 )超出显示省略号

CSS中 设置( 单行多行 )超出显示省略号

CSS文本单行或者多行超出区域省略号(...)显示方法

web前端入门到实战:css让一个盒子的高度自适应屏幕剩余的部分