web前端总结之文本超出显示省略号
当网页中显示文字过多时,会出现如下样式的文字
文字显示为省略号,当鼠标移上去时显示文字。
这就是文本超出显示省略号。
主要用到了:
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
在标签中添加title=“被省略的文字”,实现鼠标移动到省略号上显示被省略的文字。
效果:
一般都用在ul 的li中,实现文字的有序排列。显得整齐有序!
后面代码讲解:
<div class="notext">
<i class="name_sty" :title="item.file.name"> {{item.file.name}}</i>
<i class=" file_del" @click="fileDel(index)">删除</i>
</div>
注:在vue中title应 这么写
<i class="name_sty" :title="item.file.name"> {{item.file.name}}</i>
css :
.name_sty {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: 200px;
cursor: pointer;
}
1 给li设定宽度,使得排版整齐;
2 给li中的文字添加i标签。这是为了让li标签不被完全占满当然用padding也可以,但是推荐添加标签做。因为i标签的内容后面可能还有其他内容。
i标签的css属性:
display:inline-block;//行内块,使得i标签可以设置宽高等,而且不会独自占一行;
text-overflow: ellipsis;//设置文本、字内容超出部分显示省略号;
overflow: hidden;//i标签中的内容超出部分隐藏。注意与text-overflow的区别;
font-style:normal;//由于是i标签它本身的效果是让文字斜体,所以为了需要可以合理去掉这个效果。
另外实现第二行尾部开始省略。
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;