css 控制文字超出时显示省略号
不多说，直接看代码吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容超出显示省略号</title>
<style>
.limitWord{
width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;
}
</style>
</head>
<body>
<p class="limitWord">
这是内容1这是内容2这是内容3这是内容4这是内容5这是内容6这是内容7
</p>
</body>
</html>
运行效果如下：
补充：
我试过使用span，加入相同的样式，但是span并没有实现省略号功能，只有p标签可以实现，如果p标签要实现span的功能，只需要再加上一个样式即可：display:inline-block;
css 控制文字超出时显示省略号的更多相关文章
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- CSS控制 文字超出部分显示省略号
实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...
- css设置文字超出部分显示省略号。。。
兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...
- Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- HTML5 元素文字超出部分显示省略号（支持多行），兼容几乎所有常用浏览器
1,公共样式,在公共的 CSS 文件中加入以下内容 /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...
- css实现文字过长显示省略号的方法
<div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...
- 如何实现CSS限制字数,超出部份显示省略号
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...
随机推荐
- POJ - 2240 Arbitrage(Bellman-Ford)
https://vjudge.net/problem/POJ-2240 题意 已知n种货币,以及m种货币汇率及方式,问能否通过货币转换,使得财富增加. 分析 Bellman-Ford判断正环,注意初始 ...
- 正则tips
在啃Sizzle源码,被几个正则表达式给难住了,写了一下正则demo,记录一下 1,按照定义[]和(?:)里的内容不计入捕获组的数目 2,捕获组的计数顺序是,从大到小,同级从左到右 例如 var re ...
- 第5月第21天 bugly ios证书位置
1.bugly 一. 本地测试 补丁编写规则参见: JSPatch 将补丁文件main.js拖拽到工程内: 开启 BuglyConfig 中的热更新本地调试模式: BuglyConfig *confi ...
- ffmpeg查看音频文件信息
查看音频文件的信息(基于本地路径) import subprocess import json path = r'D:\learn\download\NosVJ60QCIs0b8PVHMPomZJsr ...
- MongoDB 之 "$" 的奇妙用法 MongoDB - 5
在MongoDB中有一个非常神奇的符号 "$" "$" 在 update 中 加上关键字 就 变成了 修改器 其实 "$" 字符 独立出现 ...
- python內建模块之datetime
from:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143193755 ...
- HTTP::UserAgent注意问题
例用 HTTP::Request 设置头信息时, 比如 add-content , 第二次再执行 add-content 时, content 内容会追加, 并不会重新添加. 当下次再 add-con ...
- MYSQL 的 MASTER到MASTER的主主循环同步
MYSQL 的 MASTER到MASTER的主主循环同步 刚刚抽空做了一下MYSQL的主主同步.把步骤写下来,至于会出现的什么问题,以后随时更新.这里我同步的数据库是TEST1.环境描述. 主 ...
- 如何使用windows的计划任务？计划任务？
我们经常有一些程序想要过了几小时来运行:比如定时关机 或者说希望能够每天的几点执行一个什么程序: 这些所有的操作都需要用到windows的任务计划:或者叫计划任务:反正都一样 下面小编将指导大家创建一 ...
- Singleton单例对象的使用
namespace www{ public abstract class SingletonManager<T> : ISingletonManager where T : class, ...