css字太多了省略_列表中文字太多溢出使用省略号css方法

我们经常会遇到文字太多，而为了不打破原有布局，需要将多出文字用省略号代替，实现以下效果：

文字太太太太多多多啦......

这个不多。

html：这是个列表。ul/ol都行。

这是个短句子
403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。

首先，省略号的css代码为：text-overflow: ellipsis; 注意，这行代码经常不起作用，是因为其必须满足两个条件：1、宽度必须设置；2、同时设置white-space: nowrap(不换行); 和overflow: hidden(超出部分隐藏)。因此，完整css代码：

li{width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。}

但是，问题来了，对li设置overflow: hidden后，整个列表的list-style-type，又不起作用了，无论设置哪种小图标都没有用。效果是这样的：

解决办法：ul添加设置list-style-position: inside;

但是！！！此时图标显示，溢出文字也隐藏了，但是省略号，又不知道哪里去了。。。。

最后我也不知道，为什么会造成这样的效果。但是，我有不屈不挠的精神，我吭哧吭哧，又开始了。。。。

我换了一种思路，在列表里修改样式，牵一发而动全身。我将要弄省略号的文字，用包裹，就解决了。

这是个短文字
403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。

css代码：

span{width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。}

ul{

list-style-type:circle;

/*list-style-position: inside;注意，不需要添加这行代码*/

}

效果图：

哈哈哈。。。。终于实现了！！！！既有列表符号，又有省略号。

结论：设置溢出文字，不要直接在li标签上设置，因为会有list-style-type的问题，还是包裹在span中，设置span省略号。

css字太多了省略_列表中文字太多溢出使用省略号css方法相关推荐

css中多行文本溢出显示省略号的方法
下面这几行代码可以直接复制到css样式中,实现溢出显示省略号的效果 overflow: hidden; //首先固定宽高,然后让溢出的文字隐藏 text-overflow: ellipsis; dis ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
Python统计列表中的重复项出现的次数的方法
本文实例展示了Python统计列表中的重复项出现的次数的方法,是一个很实用的功能,适合Python初学者学习借鉴.具体方法如下: 对一个列表,比如[1,2,2,2,2,3,3,3,4,4,4,4],现 ...
Python返回列表中某个元素的出现次数list.count()方法
[小白从小学Python.C.Java] [Python-计算机等级考试二级] Python返回列表中某个元素的出现次数 list.count()方法选择题请问以下Python代码输出的结果是什么 ...
哪种css实现方式优势更突出_【第十三课】更合理的CSS结构
前言从零开始学前端系列课程,与传统的视频大课堂教学不同,没有填鸭:也普通做练习题的方式不同,没有假想的模拟题. 本课程拆出80个左右必须掌握的技能点,并对其分组,从易到难地列出学习曲线.同时从真实项 ...
值对于int32太大或太小怎么解决_数控车床加工螺纹时常见故障及解决方法
数控技术在线订单 | 技术 | 干货 | 社群关注可加入机械行业群! 关注螺纹是在圆柱或圆锥表面上,沿着螺旋线所形成的具有相同剖面和规定牙型的连续凸起和沟槽.在各种机械产品中,带有螺纹的零件应用广 ...
python字符串排序_列表中字符串按照某种规则排序的方法（python）
原博文 2017-05-05 16:35 − 有时候处理数据时,想要按照字符串中的数字的大小进行排序. 譬如,存在一组记录文件,分别为'1.dat','2.dat'... 当我把该文件夹中的所有记录文 ...
html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...
电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...
linux列表中添加多个元素,这12种方法轻松合并Python中的列表
导读我喜欢12这个数字,因为有太多的事情与12有关.一年有12个月;古代用12个时辰(地支)表示一天的时间.用一纪表示12年;希腊有12主神;黄道有12宫;撒迦利亚.西琴先生的<地球编年史&g ...

css字太多了省略_列表中文字太多溢出使用省略号css方法

css字太多了省略_列表中文字太多溢出使用省略号css方法相关推荐

最新文章

热门文章

css字太多了省略_列表中文字太多 溢出使用省略号css方法

css字太多了省略_列表中文字太多 溢出使用省略号css方法相关推荐

最新文章

热门文章

css字太多了省略_列表中文字太多溢出使用省略号css方法

css字太多了省略_列表中文字太多溢出使用省略号css方法相关推荐