不多说，直接看代码吧：

<!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之旅：MySQL系列

    第一篇:初识数据库 第二篇:库操作 第三篇:表操作 第四篇:数据操作 第五篇:索引原理与慢查询优化 第六篇:数据备份.pymysql模块 第七篇:视图.触发器.事务.存储过程.函数 第八篇:ORM框架 ...

  2. HDU 4280 ISAP+BFS 最大流 模板

    Island Transport Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  3. Tomcat权威指南-读书摘要系列6

    6. Tomcat 安全防护 使用SecurityManager 在Tomcat中,决定安全策略的配置文件是$CATALINA_HOME/conf/catalina.policy,在用-securit ...

  4. python---django中文件上传

    服务端: def upload(req): if req.method == "GET": return render(req, 'upload.html') else: prin ...

  5. python Flask post 数据 输出

    #!/usr/bin/env python # -*- coding: utf-8 -*- from flask import Flask from flask import request from ...

  6. [转载]嵌入式C语言中的Doxygen注释模板

    http://blog.csdn.net/willerency/article/details/7083953 嵌入式C语言开发中通常使用Doxygen进行文档的生成.Doxygen支持多种格式,非常 ...

  7. [转载]详解主流浏览器多进程架构：Chrome、IE

    http://www.cnbeta.com/articles/109595.htm 随着Web浏览器重要性的日益突出,恶意软件.木马.间谍软件等网络攻击也呈现逐渐的上升.而面对 如此众多的潜在威胁,为 ...

  8. 为ASP.NET控件加入快捷菜单

    ContextMenu Control 快捷菜单控件概述: MSDN Liabrary 中包含了几个DHTML快捷菜单的示例.分别提供了对这一功能的不能实现方法.一个快捷菜单就是在页面中任何位置的一组 ...

  9. vue中，写在methods里的B方法去调A方法的数据，访问不到？

    今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下: getTaskList() { api.growthDetails.taskList({ ap ...

  10. ps和top的区别，以及各参数意思

    这两个命令都是查看系统进程信息的命令,但是用处有点儿不同 1.ps命令--提供系统过去信息的一次性快照 也就是说ps命令能够查看刚刚系统的进程信息  命令:ps aux或者ps lax [root@L ...