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. C# 操作 Excel(.xls和.xlsx)文件

    C#创建Excel(.xls和.xlsx)文件的三种方法 .NET 使用NPOI导入导出标准Excel C# 使用NPOI 实现Excel的简单导入导出 NET使用NPOI组件将数据导出Excel-通 ...

  2. Windbg工具使用

    https://www.cnblogs.com/startpoint/p/4194052.html https://www.cnblogs.com/lyl6796910/p/7613664.html ...

  3. Vue.js - Day3

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  4. BZOJ3261: 最大异或和(可持久化trie树)

    题意 题目链接 Sol 设\(sum[i]\)表示\(1 - i\)的异或和 首先把每个询问的\(x \oplus sum[n]\)就变成了询问前缀最大值 可持久化Trie树维护前缀xor,建树的时候 ...

  5. <Android 基础（十）> FloatingActionButton

    介绍 Source Code中的介绍如下: Floating action buttons are used for a special type of promoted action. They a ...

  6. .Net CIL

    MachineCode->Assembly->CIL(.Net) or SpecialMachineCode(JVM)->Pogramming code CIL Instructio ...

  7. 【起航计划 029】2015 起航计划 Android APIDemo的魔鬼步伐 28 App->Preferences->Default Values 偏好默认值

    DefaultValues 介绍了如何在XML中定义Preference的缺省值. <CheckBoxPreference android:key="default_checkbox& ...

  8. time和datetime模块

    在Python中,通常有这几种方式来表示时间: 1)时间戳 2)格式化的时间字符串  3)元组(struct_time)共九个元素. 由于Python的time模块实现主要调用C库,所以各个平台可能有 ...

  9. linux系统unzip文件报错的解决方案

    data.zip文件有4G多,解压的时候出问题了. Archive:  data.zip End-of-central-directorysignature not found.  Either th ...

  10. Centos 6/RHEL disable the IPv6 module.

    http://minimallinux.blogspot.com/2013/07/centos-6rhel-disable-ipv6-module.html IPv6 was introduced t ...