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. output引用类型

    1.创建存储过程,将参数avg设置为引用参数,可以对参数有反馈作用 ), @avg float output) as select @avg=AVG(price) from goods where g ...

  2. Chrome拷贝插件的对比 zeroclipboard和clipboard插件

    1.zeroclipboard插件 实现原理:Zero Clipboard 利用 Flash 进行复制,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就 ...

  3. IDEA中的一些常用的设置与快捷键

    idea 清屏(控制台)快捷键 eclipse清屏快捷键为鼠标右键+R 而在idea中默认并没有清屏console的快捷键 所以需要我们自行设置: 1,ctrl+alt+s打开settings 2,找 ...

  4. jQuery中的节点操作(一)

    html代码如下 <p>Dom操作练习</p> jQuery插入节点 $("p").append("武汉php"); //向每个匹配的元 ...

  5. better-scroll 遇到的问题 3 （transition-group 相关）

    今天在使用vue动画 transition-group 和 better-scroll 的时候,出现了下拉列表不能滚动的问题. 问题描述: 我写了一个scroll的基础组件,组件接受一个data参数, ...

  6. Eclipse 如何修改 Web 项目的名称

    Eclipse 切换到  Navigator 视图,能显现出项目下所有的文件便于修改. 1.修改该项目目录下:.project文件 <projectDescription><name ...

  7. sharepoint国内网站一览表（转发）

    中国石油化工集团公司http://www.sinopecgroup.com/Pages/index.aspx () 中国南方航空http://group.csair.com/_layouts/grou ...

  8. Hive建模

    Hive建模 1.介绍 Hive作为数据仓库,同关系型数据库开发过程类似,都需要先进行建模,所谓建模,就是对表之间指定关系方式.建模在hive中大致分为星型.雪花型和星座型.要对建模深入理解,首先需要 ...

  9. while循环小例

    # 使用while 循环输入 1 2 3 4 5 6 8 9 10 n = 1 while n <= 10: if n == 7: pass else: print(n) n = n + 1 # ...

  10. Last_IO_Errno: 1062

    主键冲突的错误 1062   模拟错误:   在主库上操作: create table test100(id int not null,name varchar(20),primary key(id) ...