不多说，直接看代码吧：

<!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. Python（3）---从迭代器到异步IO

    whenif 关注 2017.02.13 23:48* 字数 1750 阅读 250评论 0喜欢 8 目录 1. 迭代(iteration)与迭代器(iterator) 1.1 构建简单迭代器 1.2 ...

  2. 001. MyBatis+SpringMVC+Spring[重置版]

    说在前面的话 三阶段的课程知识点和细节很多,请假应该杜绝! 课后需抓紧时间复习,提高代码质量和速度! 课程周期和学习课程顺序为:[正常情况下] MyBatis 持久层框架 [2周] SpringMVC ...

  3. python---django中url访问方法

    只是了解,不推荐使用,毕竟干扰太多,任意冲突,也没有解耦,应该使用路由分发 在url匹配中支持正则匹配,例如: from django.conf.urls import include, urlfro ...

  4. Spark记录-spark-submit学习

    #查看帮助:./bin/spark-submit --help   ./bin/spark-shell --help 用法1: spark-submit [options] <app jar | ...

  5. bzoj千题计划284：bzoj2882: 工艺

    http://www.lydsy.com/JudgeOnline/problem.php?id=2882 将串S复制一遍变成SS 对SS构建后缀自动机,在上面走标号最小的边len(S)步,即可得最小循 ...

  6. 自定义泛型_无多态_通配符无泛型数组_jdk7泛型使用

    通配符 T, K, V, E 等泛型字母为有类型, 类型参数赋予具体的值 ? 未知类型 类型参数赋予不确定值, 任意类型 只能用在 声明类型上,方法参数上, 不能用在定义泛型类上 上限 extends ...

  7. Lua程序设计（四）面向对象类继承

    1.类继承 ①代码 Sharp = { _val = } --① 父类 function Sharp:new() local new_sharp = { } self.__index = self - ...

  8. ASP.NET MVC学习笔记-----Filter(2)

    接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用,它需要实现IActionFilter接口: public ...

  9. 【转】XMPP_3920_最靠谱的中文翻译文档

    CHENYILONG Blog XMPP_3920_最靠谱的中文翻译文档 Fullscreen © chenyilong. Powered by Postach.io Blog

  10. requests下载文件并重新上传

    import re import requests from io import BytesIO from django.core.files.uploadedfile import InMemory ...