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 ...
随机推荐
- RPC与RMI的区别
分布式项目按照以下发展经历了以下技术: CORBA: RMI:基于远程接口的调用 RMI-RROP:这是RMI与CORBA的结合,用在了EJB技术上,EJB留给世界上是优秀的理论和糟糕的架构. WEB ...
- 生成器python
一.列表生成式 需求:看列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],我要求你把列表里的每个值加1,你怎么实现?你可能会想到2种方式 >>> a [0, 1, 2 ...
- webpack打包提取css到独立文件
将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin 使用方法: 1.安装 npm i extract-text-webpac ...
- CSS Counter Style试玩儿
2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...
- css 基础1
css 层叠样式表 css手册 样式写在head 中间 style标签 css 样式规则: 选择器 {属性:属性值:属性:属性值} 字体样式属性:font-size 字号大小 color 字体颜色 f ...
- Java Web之路（二）Servlet之HttpServletResponse和HttpServletRequest
HttpServletResponse 1.告诉服务器应用使用UTF-8解析文本的两种方式,告诉客户端要使用什么编码 response.setHeader("content-type&quo ...
- 20155306 2016-2017-2 《Java程序设计》第八周学习总结
20155306 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 第十五章 通用API 15.1 日志 java.util.loggging包提供了日志功能相 ...
- Number of Islands I & II
Given a boolean 2D matrix, find the number of islands. Notice 0 is represented as the sea, 1 is repr ...
- 学习mysql replication
- Jquery ajax json 不执行success的原因 坑爹
最近在看jQuery的API文档,在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数,极度郁闷.后面改为1.2.6版本可 ...