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. Winform窗体“空闲事件”

    Application.Idle += Application_Idle; void Application_Idle(object sender, EventArgs e){ } 当应用程序完成处理 ...

  2. Linux访问https报错

    今天用Linux(CentOS)拉Git仓库时,报了个错unable to access 'https://github.com/Wind4/vlmcsd.git/': SSL connect err ...

  3. xml解析demo使用

    package lianxi; import java.io.FileOutputStream;import java.io.OutputStreamWriter; import javax.xml. ...

  4. Servlet细节整合

    最近在复习Servlet,发现其中有很多细节方面的东西都没有接触到,只是学了大概 1.请求转发和请求重定向的区别 2.输入参数为中文时候的乱码问题 3.Web工程中的目录写法 下面分别阐述 1.请求转 ...

  5. If you want the rainbow, you have to deal with the rain.

    If you want the rainbow, you have to deal with the rain.想要彩虹,就先忍受雨水.

  6. dojo事件绑定

    Dojo如何动态绑定事件的小demo <html> <title>事件绑定测试test</title> <head></head> < ...

  7. Design Pattern ->Factory Method

    Layering & Contract Philosophy With additional indirection Factory Method The example code is as ...

  8. Spring实践系列-入门篇（一）

    本文主要介绍了在本地搭建并运行一个Spring应用,演示了Spring依赖注入的特性 1 环境搭建 1.1 Maven依赖 目前只用到依赖注入的功能,故以下三个包已满足使用. <properti ...

  9. 新版mysql 5.7的group_by非常不和谐

    sqlalchemy.exc.OperationalError OperationalError: (_mysql_exceptions.OperationalError) (1055, " ...

  10. Apache common-io AutoCloseInputStream 分析

    Apache common-io 包是常用的工具包,他提供了对IO操作的一些封装.首先看一下input包下的 AutoCloseInputStream 类 1: * This class is typ ...