1.使用overflow: hidden把超出的内容进行隐藏；

2.然后使用white-space: nowrap设置内容不换行；

3.最后使用text-overflow: ellipsis设置超出内容为省略号

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
.content {
width: 200px;
overflow: hidden;
/*内容超出后隐藏*/
text-overflow: ellipsis;
/* 超出内容显示为省略号*/
white-space: nowrap;
/*文本不进行换行*/
}
</style>
</head>

<body>
<p class="content">
微博搜索 综合找人文章视频图片话题 搜索 你的行为有些异常,请输入验证码: 看不清,换一张 我真滴不是机器人 关于微博 微博帮助 意见反馈 开放平台 微博招聘 ...
</p>
</body>

</html>

css设置内容超出后显示省略号的更多相关文章

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

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

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

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

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

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

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

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

  5. Div内部的内容超出部分显示省略号（仅仅只有一行内容）

    效果如下:

  6. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. html页面内容超出后显示水平滚动条的问题

    这个问题已经遇到好几次,解决起来也熟练了很多.   出现这种问题一般都是html或页面中的某一内部元素宽度超了. 下面总结我遇到的几种情况: 1.某一内部元素width设为100%,然而它还有bord ...

  8. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

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

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

随机推荐

  1. Hosted Services+Quartz实现定时任务调度

    背景 之前.net core使用quartz.net时,总感觉非常变扭,百度和谷歌了N久都没解决以下问题,造成代码丑陋,非常不优雅: 1.项目启动时,要立刻恢复执行quartz.net中的任务 2.q ...

  2. Asp.Net MVC 5 Razor 视图 未将对象引用到实例

    未将对象引用到实例的错误居然指向了@{Leyout=“..此处略,核实路径无误”}. 最后发现原来是在一个<select .. name="@Model.Category"& ...

  3. Razor,aspx的占位控件（母版页）

    1.razor: 母版页中:@*类似master的占位控件*@ @RenderSection("scripts", required: false) 部分页中: @section ...

  4. elasticsearch映射及分析-----3

    首先我们看下不同的索引方式相同的字段指定字段类型与不指定字段类型es会怎么处理 1.不指定类型,直接创建索引及类型文档 我们看下他默认的索引映射 2.创建索引和类型时指定字段类型 这里创建了一个索引为 ...

  5. JSP中的<%%>,<%! %>,<%= %>,<%-- --%>

    <%  %>             添加java代码 <%!   %>   添加java方法 <%= %>    将变量或表达式输出到页面 <%--   - ...

  6. android ContentProvider共享数据

    ContentProvider共享数据 ContentProvider对外共享数据需要: 1.定义一个ContentProvider类,需要继承android的ContentProvider基类 2. ...

  7. c\c++数据类型存储

    C四个 C++五个 一. 在c中分为这几个存储区 1.栈 - 由编译器自动分配释放 2.堆 - 一般由程序员分配释放,若程序员不释放,程序结束时可能由OS回收 3.全局区(静态区),全局变量和静态变量 ...

  8. 概念：静态static相关知识

    在面向对象中,有‘静态’概念,通过关键字static进行说明, 例如: 静态属性:public static $name = '小仓鼠' 静态方法:public static function Nam ...

  9. Windows计算下载文件的SHA256 MD5 SHA1

    引用自 http://blog.163.com/licanli2082@126/blog/static/35748686201284611330/ certutil -hashfile yourfil ...

  10. anaconda添加源(channels)

    如果使用environment.yml下载conda环境时,系统很慢,那么可以增加其他的下载源: - https://conda.anaconda.org/menpo - https://mirror ...