兼容浏览器的CSS控制字符宽度省略号效果

最新推荐文章于 2022-05-27 17:37:14 发布
最新推荐文章于 2022-05-27 17:37:14 发布
阅读量146 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： 浏览器 CSS 公告 IE Firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_5119/article/details/81657620
本文介绍了几个关于CSS的重要技巧和最佳实践，包括如何正确使用alt和title属性、解决IE浏览器中的:hover伪类问题等。此外，还展示了如何遵循CSS的最佳习惯以提高网页布局的质量。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要写在最后了*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 170px;float: left;}
li:not(p):after {content: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
</style>

///底下是内容

<ul>
<li><a href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">使用CSS最佳习惯 </a></li>
<li><a href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">说说XHTML中的alt属性和title属性 </a></li>
<li><a href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">IE中伪类:hover的使用及BUG </a></li>
<li><a href=http://www.52css.com/"<a href="http://www.52css.com/" target="_blank" target="_blank">http://www.52css.com/</a>">52CSS公告</a></li>
</ul>
超长显示省略号...，兼容各浏览器，适用于多行
在坑中上爬，在打击中成长
01-06 3420
超长显示省略号是一个很困扰的事情，各个浏览器的对css的解析不同，比如 1. IE可以使用overflow:hidden;white-space:nowrap;text-overflow:ellipsis， 2. Opera中也有相关的支持属性text-overflow:-o-ellipsis-lastline 3. 新版的chrome中有一个属性-webkit-line-camp属性，它允
CSS 控制字符宽度省略号效果 兼容浏览器
12-12
兼容浏览器的CSS控制字符宽度省略号效果，是非常实用的，由于FF对溢出显示省略号的属性支持不好。因而在进行编码时，应用到了一个HACK和FF的私有属性，大家在学习时注意区别。 看下面的HTML代码： <ul> <li><a>使用...
JS计算字符串在浏览器中显示的宽度
qq_24134853的博客
08-27 3664
js计算字符串宽度 大家可能会碰到这样一个需求：一个容器的宽度固定，当内容的宽度超过容器的宽度时鼠标移入显示提示框，不超过时则不显示。 这个时候就需要知道内容到底多宽。 怎么计算宽度 一 、估计法 假设文字大小是14px，如果字符的长度是10，那么内容的宽度大概是14*10=140 ，这种方法显然误差很大，数字，特殊字符，英文字母，汉字的大小各不相同。 二、真实计算法 利用offsetWi...
JS计算字符串在浏览器的宽度和高度
yuge486的博客
02-25 2065
JS计算字符串在浏览器的宽度和高度
css多行文本溢出显示省略号（兼容ie）
weixin_30393907的博客
03-16 1468
在日常编写页面中，我们经常遇到内容行数过多时，需要出现 “...” 来处理。但是又要考虑IE浏览器或IE内核浏览器的兼容性。 普通实现方法： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 　　这种方法适合于WebKit浏览器及移动端，对...
css实现多行省略号
o_heart
03-28 2741
  大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。那么利用css如何实现多行省略号呢？利用-webkit-line-clamp属性（WebKit的CSS扩展属性-WebKit是私有属性）是可以实现的，但是只适用于webkit浏览器和移动端。另外可以利用伪类配合定位实现，这个兼容性好一些。 利用-...
css实现字符串截断并加省略号示例
09-25
CSS（Cascading Style Sheets）提供了强大的样式控制能力，其中包括字符串截断并添加省略号的功能。这个功能在显示文章标题、列表项或者摘要时特别有用，可以避免内容溢出并保持页面布局整洁。本文将详细讲解如何...
CSS文本超出指定宽度后隐藏并显示为省略号的实现方法
09-24
综上所述，通过设置 `text-overflow`、`overflow` 和 `white-space` 属性的组合，我们可以控制CSS中文本溢出的显示方式，使内容在超出指定宽度后能够隐藏多余部分，并用省略号来提示用户还有更多内容。这在进行Web...
字符串过长CSS截取多余文字并用省略号显示
09-25
在网页设计中，有时我们需要对过长的字符串进行截取，并在结尾处添加省略号以保持布局的整洁和美观。CSS（Cascading Style Sheets）提供了一种优雅的方式来实现这个功能，尤其对于动态生成的内容，如用户昵称或者...
css文本超过多行显示省略号兼容所有浏览器
qq_40664253的博客
02-03 972
css
ie7,ie6兼容性总结
weixin_33738555的博客
11-24 200
下面是14条特殊情况仅供参考：1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差...
CSS实现单行、多行文本溢出显示省略号（…）
laiyuan999的博客
07-18 544
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多...
Chrome firefox ie等浏览器空格 宽度不一样怎么办
u014802309的专栏
09-15 3483
之前某个页面用了空格 ，但是在chrome firefox 和ie显示的宽度都不一样，无法对齐。 搜索了一下，很多人都转载了那篇设置成宋体的，可是仍然没对齐，要么ie对齐，要么chrome没对齐，于是好好研究了一下空格。 大家都 不好把控，于是，我们找到了新的替代方案： 用半角空格 或者全角空格 就可以了，&en
多行文本超出范围显示省略号，IE使用。
jxf4jqh的博客
09-28 1736
对于IE兼容的共同方法 多行文本通过css可设置完成，但是IE不兼容display: -webkit-box;属性而不可使用。本方法将字符串分截成多段后以最后一行使用单行省略号实现。 提示：以下是本篇文章正文内容，下面案例可供参考 一、字符串分段 创建一个虚拟节点，循环字符串并填入节点中，节点长度与外层div节点进行比较，超出则截取继续存入下一行。 // 建立一个虚拟节点 let measure = ce('span'); (function (s) { s.position = 'absolute';
html+p标签+两行显示,HTML+CSS入门 两行显示省略号兼容火狐浏览器
weixin_33970994的博客
06-05 1111
本篇教程介绍了HTML+CSS入门 两行显示省略号兼容火狐浏览器，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<正常写法：.ellipse1{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.ellipse2{overflow:hidden;text-overflow:ellipsis;disp...
Css显示省略号
记录常见的问题以及解决办法
05-27 4293
单行省略号 width:100px; //设置宽度 max-width:200px; //也可以设置最大宽度 overflow: hidden;//溢出隐藏 white-space: nowrap; // 强制一行显示 text-overflow: ellipsis;// 显示。。。省略号 多行省略号 width: 100px; //设置宽度 max-width:200px; //也可以设置最大宽度 overflow : hidden; // 溢出隐藏 display: -
css多行超出显示点_css实现多行文本溢出显示省略号(…)全攻略
weixin_39781599的博客
12-19 543
省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。代码如下复制代码overf...
css--两行显示省略号兼容火狐浏览器
weixin_30318645的博客
11-15 805
css--两行显示省略号兼容火狐浏览器 正常写法： .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .ellipse2{overflow:hidden; text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:ve...
CSS文本超过两行用省略号代替(兼容所有浏览器)
热门推荐
雷欧奥特曼的博客
09-18 6万+
CSS文本超过两行用省略号代替1、常规写法(只兼容Chrome内核浏览器)2、可以兼容所有浏览器的方式 1、常规写法(只兼容Chrome内核浏览器) 完整代码供参考： &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot; dir=&amp;amp;amp;quot
解决Firefox浏览器中文本溢出显示省略号问题
它以安全性、开放性和扩展性著称，同时也为前端开发者提供了丰富的CSS控制选项，以便更好地实现网页的布局和视觉效果。本篇知识点将围绕如何在Firefox浏览器中实现内容溢出时的省略号显示进行详细说明。 ### CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值