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 ...
随机推荐
- LeetCode 7最长公共前缀
编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow" ...
- d3浅谈
d3是一个及其庞大的库,有20个模块,大小也达到了216kb,是JQ1.x的2倍多,JQ3.x的3倍多,JQ本来就挺笨重的一个库,d3更是如此,但是它的功能确实很强悍~ d3的定位是一个科学计算库,并 ...
- json字符串转java对象
今天遇到一个问题,前端ajax获取到一个javaBean对象,好多方法发ajax请求需要把这个对象再传到后端,后端再根据这个对象进行操作(之前计划传递id,但发现传递id的话,后端多个方法都需要根据i ...
- SHELL (2) —— Shell变量的核心基础知识和实践
摘自:Oldboy Linux运维——SHELL编程实战 Shell变量:用一个固定的字符串(也可能是字符.数字等的组合)代替更多.更复杂的内容,该内容里可能还会包含变量.路径.字符串等其它的内容. ...
- Dubbo学习笔记9：Dubbo服务提供方启动流程源码分析
首先我们通过一个时序图,直观看下Dubbo服务提供方启动的流程: 在<Dubbo整体框架分析>一文中我们提到,服务提供方需要使用ServiceConfig API发布服务,具体是调用代码( ...
- Spring RedisTemplate操作-List操作（4）
@Autowired @Resource(name="redisTemplate") private RedisTemplate<String, String> rt; ...
- [转载]ASP.NET Error – Adding the specified count to the semaphore would cause it to exceed its maximum count
http://jwcooney.com/2012/08/13/asp-net-error-adding-the-specified-count-to-the-semaphore-would-cause ...
- BZOJ2428 均分数据
2428: [HAOI2006]均分数据 Time Limit: 5 Sec Memory Limit: 128 MB Description 已知N个正整数:A1.A2.…….An .今要将它们分 ...
- vsftp服务器部署
环境:CentOS 6.6 目标:个人虚机部署vsftp服务器,供测试使用. 说明:步骤已改写为脚本,直接添加用户与对应的密码列表,调用函数名即可 ########################## ...
- 【CTF WEB】命令执行
命令执行 找到题目中的KEY KEY为八位随机字符数字,例如key:1234qwer.提交1234qwer 即可. 漏洞代码 <?php system("ping -c 2 " ...