不多说，直接看代码吧：

<!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. Java基础-线程安全问题汇总

    Java基础-线程安全问题汇总 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.内存泄漏和内存溢出(out of memory)的区别 1>.什么是内存溢出 答:内存溢出指 ...

  2. Java基础-数据类型应用案例展示

    Java基础-数据类型应用案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.把long数据转换成字节数组,把字节数组数据转换成long. /* @author :yinz ...

  3. cookie添加删除修改

    //cookie添加 document.cookie="username=John Doe"; //添加过期时间 document.cookie="username1=J ...

  4. bzoj千题计划266：bzoj4872: [六省联考2017]分手是祝愿

    http://www.lydsy.com/JudgeOnline/problem.php?id=4872 一种最优解是 从大到小灯有亮的就灭掉 最优解是唯一的,且关灯的顺序没有影响 最优解 对每个开关 ...

  5. html5 canvas显示文字（写上5个字，纪念我那刚刚逝去的爱情）

    <script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,fal ...

  6. 用Canvas做动画

    之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...

  7. shell 判断脚本参数

    测试登陆脚本 ./test.sh -p 123 -P 3306 -h 127.0.0.1 -u root #!/bin/sh ];then echo "USAGE: $0 -u user - ...

  8. expect 交互 之shell执行命令操作

    shell 执行命令操作 /usr/bin/expect -c " proc jiaohu {} { send_user expect_start expect { password { s ...

  9. 【配置】Spring Struts配置信息

  10. Javascript - 操作符

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