一、鼠标移入显示
在一些需要强调的地方,我们可以设置鼠标移入时显示全部内容,以避免省略号的出现。我们可以借助CSS中的: hover伪类来实现。例如,我们可以将一段长文字放在一个带有固定高度和overflow属性的容器中,然后在:hover时将overflow设为visible即可。
.content { height: 50px; overflow: hidden; } .content:hover { overflow: visible; }
二、超出部分显示省略号
在某些情况下,我们可能希望超出部分显示省略号,这时可以使用CSS中的text-overflow属性。text-overflow属性只有在元素内的内容超出容器大小时才会起作用。当设置为ellipsis时,它会用省略号代替超出部分的内容。
.content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
三、显示省略号
如果我们希望在元素的结尾显示省略号,我们可以使用CSS中的ellipsis属性,前提是要设置元素的宽度。
.content { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
四、超出隐藏显示省略号
如果我们不想让内容以省略号的形式出现,而是希望完全隐藏超出的部分,也可以使用CSS中的overflow:hidden属性。这样,元素的大小就会限制内容,超出的部分就会被隐藏起来。
.content { width: 200px; overflow: hidden; }
五、文字超出隐藏变省略号
如果我们希望多行文字超出隐藏时变成省略号,而不是完全隐藏,我们可以使用CSS中的line-clamp属性。这个属性需要和其他属性一起使用,如disply: -webkit-box、-webkit-box-orient、-webkit-line-clamp、overflow:hidden。
.content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
六、文本超出2行显示省略号
我们同样可以通过line-clamp属性限制行数,当我们要求元素中的文本在超过两行后显示省略号时,可以这样设置:
.content { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
七、超出文本省略显示
在一些设计要求中,我们希望文本超过一定宽度后仍然可以省略。我们可以使用CSS中的white-space和text-overflow属性来实现。white-space属性用于定义元素内部空白的处理方式,而text-overflow属性用于定义文本溢出元素时的处理方式。
.content { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
八、两行超出省略号
当我们需要限制文字不超过两行时,如果超过两行需要以省略号代替,我们可以使用CSS中的line-height属性设置行高为文字大小的倍数,从而控制行数。
.content { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; line-height: 1.5; overflow: hidden; }
九、内容超出三行省略号
当我们需要限制文字不超过三行时,超过三行需要以省略号代替,可以使用CSS中的max-height、line-height和text-overflow属性来实现。max-height是设置元素高度的最大值,line-height是设定每行文字的高度,text-overflow用于定义超出文本的处理方式。
.content { display: -webkit-box; height: 3.6em; line-height: 1.2em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
十、超出一行显示省略号
当我们只需要将超出一行的部分用省略号代替,可以设置元素的宽度和line-height属性
.content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; width: 200px; }