web前端总结之文本超出显示省略号

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;

web前端总结之文本超出显示省略号相关推荐

文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法...
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折 ...
实现文本超出显示省略号
关键词 :文本超出显示省略号以前一直以为只能实现一行文本超出才能显示省略号,今天才发现是我见识太浅薄了! 1.限制文本为一行超出显示点点点 height: 30px; overflow: hidd ...
css 文本超出显示省略号不起作用
一.单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二.多行文本显示省略号 overflow : h ...
文字/文本超出显示省略号
文字或文本超出显示省略号 1. 超出一行隐藏: 第一步:给文本设置固定宽度第二步:给文本设置以下属性 <html><head><meta charset="u ...
文本超出显示省略号的方法
1.一行文本超出显示省略号的方法:text-overflow和white-space超出隐藏显示省略号设计css样式时,遇到要使文本在一行内显示,超出则加省略号的问题解决办法: 只需要使用text- ...
CSS文本超出显示省略号
CSS文本超出显示省略号 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
禁止选择文字和文本超出显示省略号
禁止选中文字用来防止用户选中页面上的文字的css样式 uesr-select:none; -webkit-user-select:none -moz-uesr-select:none; -ms-ue ...
Vue文本内容超出显示省略号，超出显示tooltip提示
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 代码中有用到Element-UI的组件,还有会提示在Table组件中和 ...
Vue文本内容超出显示省略号，超出显示tooltip提示2.0
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 我用两种方式满足了需求,这是其中一种,想看另一种可以查看Vue文本内容 ...
css实现文字超出显示省略号...
01.块状元素单行文本超出显示省略号: ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ove ...

web前端总结之文本超出显示省略号

web前端总结之文本超出显示省略号相关推荐

最新文章

热门文章