文本内容超出后显示省略号效果

来源：互联网发布：集线器端口电源限制编辑：程序博客网时间：2024/05/18 02:13

有这么一个p标签：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>文本内容超出后溢出隐藏</title>    <style>        p {            width: 300px;            height: 30px;            line-height: 30px;            background-color: bisque;        }    </style></head><body><p>我要溢出隐藏并显示省略号，我要溢出隐藏并显示省略号</p></body></html>

页面效果：
这里写图片描述

现在想要让它溢出隐藏，并将超出的内容用省略号显示，办法如下：

p {    overflow: hidden;         /* 溢出隐藏 */    white-space: nowrap;      /* 不换行 */    text-overflow: ellipsis;  /* 将隐藏的部分用省略号代替 */}

给p标签加着三个属性（三者缺一不可）即可。

页面效果：

这里写图片描述

阅读全文

0 0

文本内容超出后显示省略号效果
内容超出后显示省略号
CSS3如何实现超出指定文本以省略号显示效果
HTML超出文本显示省略号...
【文本超出显示为省略号】
超出文本部分显示省略号
textView 文本字数超出部分显示省略号
HTML超出文本显示省略号...[text-overflow]
css 对超出文本显示省略号
HTML超出文本显示省略号...[text-overflow]
设置TextView文本超出显示省略号
文本换行和超出一行显示省略号
文本不换行，超出显示省略号
浅谈CSS3文本超出长度显示省略号
css文本超出长度用省略号显示
css实现文本超出部分显示省略号
CSS 文本超出指定宽度后隐藏并显示为省略号鼠标移上显示全文
JQuery 控制超出内容显示省略号
JPush极光推送Java服务器端实例
等待唤醒机制
很久之前写的日历
vs2015 常用快捷键整理
Linux下freeradius-server和freeradius-client的安装和验证
文本内容超出后显示省略号效果
git
Redis原理
CentOS安装Tomcat
自定义注解
利用反射与dom4j读取javabean生成对应XML和读取XML得到对应的javabean对象集合
Oracle两种临时表的创建与使用详解
MySQL EXPLAIN 一：输出格式详解
xUtils使用注解实例化对象返回空