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. 2019.3.26判断是否回文（java实现）

    我所有的文章都是对我总结学习的总结,那里不好或者冒犯了那里,我先对您说声对不起,请告知我进行改正. 今天java老师作业题目是判断是一个字符串否是回文: emmmm,我的思路是将字符串逆序,然后使用方 ...

  2. intellijidea课程 intellijidea神器使用技巧 5-1 svn相关

    subversion ==> show local history 查看历史记录 Ctrl D 历史记录对比 ctrl alt z 复原

  3. .Net Core 应用框架。

    1.分布式系统框架  https://github.com/MassTransit/MassTransit 2.搜索引擎  https://github.com/XiLife-OSPC/Masuit. ...

  4. #include stdio.h(5)

    #include <stdio.h> int main() { //1.数组的排序-冒泡排序 /* 1.规则:相邻的两个数据进行比较 2.如果有N个数据,需要选择N-1次参照物来比较, 因 ...

  5. Java Knowledge series 1

    Programming language evolves always along with Compiler's evolvement JVM as Additional Indirection I ...

  6. Python开发环境Wing IDE之Search in Files工具详解

    Search in Files工具是Wing IDE中最强大的搜索选项.它支持磁盘.项目,打开编辑器,或其它文件集的多文件批量搜索.它还可以使用通配符搜索,并可以做基于正则表达式的搜索/替换. 建议用 ...

  7. php的yii框架开发总结3

    利用yii里面的gii工具可以很容易的自动创建数据表相应的的CURD操作的基于MVC的文件: 首先,打开:自己网站/protected/config/main.php文件 'modules'=> ...

  8. isee图片专家批量处理图片大小教程

    经常用手机.照相机外出拍照片,然后再弄到电脑上面很占硬盘空间了,isee图片专家是一款非常专业的批量压缩图片大小工具,方便储存,给电脑减压,具有一次自动处理N张图片:程序小巧,资源占用低,处理速度快等 ...

  9. 开始用PyTorch

    怎么说呢,TensorFlow有些实现过于蛋疼,我需要使用更实用的框架. 目前在读https://github.com/chenyuntc/pytorch-book

  10. 使用loadrunner 12 手动关联

    关联的含义: 如浏览器打发送一个网页A请求,服务器返回这个请求,并且在返回的内容中携带一个session id=key,当浏览器再送出网页B的请求时,这时就要用ID=key的数据,服务器才会认为这是合 ...