不多说，直接看代码吧：

<!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 控制文字超出时显示省略号的更多相关文章

  1. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  2. CSS控制 文字超出部分显示省略号

    实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...

  3. css设置文字超出部分显示省略号。。。

    兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  4. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  5. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  6. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  7. HTML5 元素文字超出部分显示省略号（支持多行），兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  8. css实现文字过长显示省略号的方法

    <div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...

  9. 如何实现CSS限制字数,超出部份显示省略号

    <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...

随机推荐

  1. JS控制form表单action去向

    http://blog.csdn.net/w709854369/article/details/6261624 不知道大家遇没遇到这种情况,当我们提交一个表单的时候,可能因为相关的参数不同而需提交给不 ...

  2. javaWeb接口开发

    链接:http://blog.csdn.net/zxw136511485/article/details/51437115

  3. python(27) 抓取淘宝买家秀

    selenium 是Web应用测试工具,可以利用selenium和python,以及chromedriver等工具实现一些动态加密网站的抓取.本文利用这些工具抓取淘宝内衣评价买家秀图片. 准备工作 下 ...

  4. centos7搭建ELK Cluster集群日志分析平台

    应用场景:ELK实际上是三个工具的集合,ElasticSearch + Logstash + Kibana,这三个工具组合形成了一套实用.易用的监控架构, 很多公司利用它来搭建可视化的海量日志分析平台 ...

  5. POJ 3710 无向图简单环树上删边

    结论题,这题关键在于如何转换环,可以用tarjan求出连通分量后再进行标记,也可以DFS直接找到环后把点的SG值变掉就行了 /** @Date : 2017-10-23 19:47:47 * @Fil ...

  6. Guava HashMultiset（MultiSet）

    multiset:多重集合,和set唯一的不同是 set 集合中一个值只能出现一次,而multiset多重集合中一个值可以出现多次.一个典型的应用就是统计单词出现次数 举例: public class ...

  7. Javascript - 操作符

    操作符(Operator) void 如果void后是数字,就返回NAN,否则返回Undefined. alert(void "hello");//跟的字符 print undef ...

  8. hibernate的一对多和多对一关联

    一对一的关联就不写了,一般项目也用不到,如果可以一对一就直接合成一个表了,也不会出现一对一的关系. 本文主要研究一对多的关系. 1.一对多的关系研究: (1)RDB中关系表达:  多的一方创建外键指向 ...

  9. MySQL常见的两种存储引擎：MyISAM与InnoDB的爱恨情仇

    Java面试通关手册(Java学习指南,欢迎Star,会一直完善下去,欢迎建议和指导):https://github.com/Snailclimb/Java_Guide 一 MyISAM 1.1 My ...

  10. nginx在使用非80端口做反向代理【转】

    设置nginx反向代理,nginx在使用非80端口做反向代理时,浏览器访问发现返回302错误 upstream jboss{ server max_fails= fail_timeout=20s; s ...