CSS如何设定li盒子里字数的长度，大于了就显示省略号

最新推荐文章于 2022-12-05 23:55:54 发布
原创 最新推荐文章于 2022-12-05 23:55:54 发布 · 1.4k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #css3 #前端
本文介绍了如何通过CSS设置元素的固定宽度、禁止文字换行并启用文本超出显示省略号的技巧，这对于网页布局中控制长文本显示非常实用。通过width属性设定元素宽度，white-space属性防止文字换行，text-overflow属性实现超出部分以省略号显示。

1.你要固定li盒子的宽度，即width:xxx;

2.因为默认的是文字长度超过父容器的宽度时候，文字会换行，所以要确定里面的文字不换行 即white-space:nowrap;
3.超出文本用省略号显示，即 text-overflow:ellipsis;

li 字多出了省略号_如何设置列表(li)超出部分显示省略号？
weixin_31523667的博客
12-24 1100
我们常常希望列表中的内容，超过设置的长度的时候，不要撑开父元素，也不希望它直接换行；我们更愿意让其超过部分用省略号来代替。而在title标签中，置放的是完整的标题。这样的方法新手们常常不知道该如何搞定。下面就是方法的演示。不过请注意此方法适用与IE与OP浏览器！设置li超出部分显示省略号的方法webjx.comwebjx.com - Div CSS布局 常见问题webjx.com - Div CS...
li 字多出了省略号_css实现DIV,LI等元素超出部分文字用省略号…显示
weixin_36424625的博客
12-24 756
这篇文章主要为大家详细介绍了css实现DIV,LI等元素超出部分文字用省略号…显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。让DIV,LI等元素超出部分文字用省略号…显示。很简单就不多费用了，直接上代码css代码为：display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsi...
列表中文字太多 溢出使用省略号css方法
weixin_40362806的博客
03-03 485
结论：设置溢出文字，不要直接在li标签上设置，因为会有list-style-type的问题，还是包裹在span中，设置span省略号。 我们经常会遇到文字太多，而为了不打破原有布局，需要将多出文字用省略号代替，实现以下效果： 文字太太太太多多多啦...... 这个不多。 html：这是个列表。ul/ol都行。 <ul> <li>这是个短句子</li> <li>403是...
css防止ul下的li里面内容超出换行
热门推荐
ystyaoshengting的专栏
05-21 2万+
摘自 http://blog.163.com/weison_hi/blog/static/176804047201192535224607/   在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里  分别有4个li 这个4个li的宽度根据它们的自身内容长度为80p...
如何让li中内容显示超过长度后以省略号显示
天外有天，人外有人。 专注品质 不断创新 让精益求精成为习惯
06-13 1665
文字溢出时显示省略号 重点: li {     width: 200px;   (定义宽度)     white-space: nowrap; （不换行，一行显示）     text-overflow: ellipsis;  （溢出用省略号）      -o-text-overflow: ellipsis;       overflow: hidden
li 字多出了省略号_CSS如何设定li盒子里字数的长度，大于了就显示省略号？
weixin_34353688的博客
12-24 226
慕姐829404web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全...
html使用css让文字超出部分用省略号三个点显示的方法案例
quanquan_i的专栏
10-11 3164
html使用css让文字超出部分用省略号三个点显示的方法： 　　我正确使用的就是下面的代码，li里面是a标记。在IE和google中使用是正常的，火狐不知道，我也不在意，等你来测 　　li{ 　　display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;
用 CSS 控制li列表的长度，让li里面的内容不换行显示，而且让多余li长度的内容用...表示...
weixin_30481087的博客
08-02 794
用 CSS 控制li列表的长度，让li里面的内容不换行显示，而且让多余li长度的内容用...表示，其实实现的方法很简单。我们只需要在对li的css样式进行控制就可以了，具体如下： 1 white-space:nowrap; /*不让文字内容换行*/ 2 overflow:hidden;/*文字溢出的部分隐藏起来*/ 3 text-overflow:ellipsis; /*用...替代溢出...
CSS段落文字只显示一行，超出部分显示省略号，鼠标悬浮显示全部段落内容
ʚ菲菲的博客ɞ
07-06 5789
CSS段落文字只显示一行，超出部分显示省略号，鼠标悬浮显示全部段落内容 1. 给段落设置属性 .longlinedots{ max-width: 900px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } max-width: 900px; // 设置容器最大宽度 white-space: nowrap; // 设置段落文本不换行(不换行才有可能行溢出)； overflow: hidden; //
css动态溢出自适应缩略文字ellipsis
前端一线搬运工的博客
02-18 1673
GIF展示: 原理: 父盒子自适应, 子盒子大小随父盒子动态变化, 即可实现动态缩略文字; 代码: <div style="width:100%"> <p style="width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">我是一段重复的长文本|我是一段重复的长文本|我是一段重复的长文本|我是一段重复的长文本</p> </div> ...
使用css将超出盒子的文字显示为省略号
maplecsd的博客
07-18 733
使用css将超出盒子的文字显示为省略号 为目标盒子设置以下css样式就可以了： li { overflow: hidden; /* 将超出的内容隐藏 */ white-space: nowrap; /* 禁止文字自动换行 */ text-overflow: ellipsis; /* 多余的文字显示为省略号 */ } ...
CSS中 设置( 单行、多行 )超出显示省略号
明天也要努力的博客
12-05 16万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
css字太多了省略_列表中文字太多 溢出使用省略号css方法
weixin_39700394的博客
12-22 411
文字太太太太多多多啦......这个不多。html：这是个列表。ul/ol都行。这是个短句子403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。首先，省略号的css代码为：text-overflow: ellipsis; 注意，这行代码经常不起作用，是因为其必须满足...
【文本超出一行，显示省略号，悬浮出现tooltip】
limuzhixing的博客
06-30 845
文本超出一行，显示省略号，悬浮出现tooltip
LI中内容超过长度后以省略号显示的方法
weixin_30709929的博客
02-08 209
程序代码<HTML><HEAD><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css><!-- li {width:200px;white-space:nowrap;text-overflow:ell...
如何处理Li列表中的文字长度
05-02 366
在平时的项目中，我们经常与会到这样的问题 比如在展示一个列表的时候，文字长度的不同会使得界面的美观度大打折扣 下面是最近刚完成的一个项目首页 在这个界面的左侧这一部分，会显示一些系统公告， 当公告内容很长的时候，我们就截取公告标题的前一部分后面加“...”来提示标题太长了 当然这里还会根据title来进一步提示 我就是用的这个来实现的，很好用的。 转载于:ht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值