网页内容超长用省略号代替超过部分（转载）

css为超过一定宽度的文本内容自动加上省略号

当在html中某个地方添加文本内容的时候如果内容过长我们会希望他超过一定宽度之后，其余的可以被截断，后面补充为省略号；

实现方式：

　　1、设置css样式为文本不换行；

　　2、位包裹文本的标签指定宽度；

　　3、设置自动隐藏超出的内容；

　　4、设置超出的文本使用省略号；

CSS代码如下：

1     width: 200px;
2     overflow: hidden;
3     font-size: large;
4     white-space: nowrap;
5     text-overflow: ellipsis;

举个栗子：

<html><head></head><body style="padding: 20px;"><div style="width: 200px;overflow: hidden;font-size: large;white-space: nowrap;text-overflow: ellipsis;">你好，我是用来测试的文字，我现在可以出现省略号</div></body>
</html>

运行效果：

OK！

问题补充：

本人用做兼容性测试了一下，在 IE 11、火狐、谷歌浏览器测试通过。请看下图：

另可以看看这篇文章，实现相同的效果：

前端实战——完美解决文本框超出内容用“……”表示，鼠标滑过时显示隐藏内容

网页内容超长用省略号代替超过部分（转载）相关推荐

【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...
php 超过一行用省略号,php 超长用省略号代替
/* Utf-8.gb2312都支持的汉字截取函数 cut_str(字符串, 截取长度, 开始长度, 编码); 编码默认为 utf-8 开始长度默认为 0 */ function cut_str($s ...
如何仅通过CSS实现多行文本超长自动省略号
在CSS中,我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾: overflow: hidden; word-break: normal; text-overflow: elli ...
如何设置省略号对其序号 html,html 用css实现table中超长字符串省略号表示 - 天天好心情 - 博客园...
最近学习样式,想用样式来控制GridView中超长字符的省略显示,可是网上从后台的方式是在让我诟病,当然,个人喜好问题:P 由于GridView最终是Table形式输出,于是从table实现该样式找 ...
php 超长用省略号代替
2019独角兽企业重金招聘Python工程师标准>>> /* Utf-8.gb2312都支持的汉字截取函数 cut_str(字符串, 截取长度, 开始长度, 编码 ...
Android 加载超长大图（长度超过4096）的解决方案和处理办法
发现问题: Bitmap too large to be uploaded into a texture (1445x6459, max=4096x4096) 意思就是bitmap的长图超长了,大于了 ...
利用Webbrowser类实现超长网页的截屏的实现（解决报错不能截取的难题）
之前写过一篇文章,说是解决了超长网页截图的问题.但是实际上,现实是很残酷的,试图截取一个网页的时候就出了问题网址如下: http://www.cnblogs.com/grenet/archive/2 ...
css td 溢出改为省略号
<style>.table{table-layout: fixed;width:100%;}.td{width:100px; white-space: nowrap;overflow: h ...
css实现文本框中内容超出长度显示省略号，鼠标移入悬浮显示全部内容
css样式: width: 300px;text-overflow: ellipsis;overflow: hidden; 此时的设置可以完美实现文本框中的内容超长显示为省略号:但是想知道全部内容是不 ...

网页内容超长用省略号代替超过部分（转载）

css为超过一定宽度的文本内容自动加上省略号

问题补充：

前端实战——完美解决文本框超出内容用“……”表示，鼠标滑过时显示隐藏内容

网页内容超长用省略号代替超过部分（转载）相关推荐

最新文章

热门文章