CSS文本溢出显示省略号怎么实现?
前言
我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法。
一、单行文本溢出显示省略号
代码示例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 150px;height: 100px;border: 1px solid grey;margin: 100px auto;/* 强制单行显示 */white-space: nowrap;/* 溢出的部分隐藏 */overflow: hidden;/* 文字用省略号代替超出部分 */text-overflow: ellipsis;}</style>
</head><body><!-- 单行文本显示省略号 --><div>此处省略一万字,我是看不见的</div>
</body></html>
效果如图:
主要代码为:
/* 强制单行显示 */
white-space: nowrap;
/* 溢出的部分隐藏 */
overflow: hidden;
/* 文字用省略号代替超出部分 */
text-overflow: ellipsis;
二、多行文本溢出显示省略号
* 多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webKit内核)
代码示例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 150px;margin: 100px auto;border: 1px solid grey;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style>
</head><body><!-- 多行文本显示省略号 --><div>这一节主要讲了多行文本溢出时怎么显示为省略号</div>
</body></html>
效果如图:
主要代码为:
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
总结
这篇文章主要介绍了网页中文字溢出怎么显示为省略号。
CSS文本溢出显示省略号怎么实现?相关推荐
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果(text-overflow)
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
- vue css 文本溢出显示省略号、失效 相关问题整理
问题进阶 简单实现 打包后,居然没有效果! 注释加了,效果好了,控制台警告却亮起了(强迫症不能忍!!) 数字或英文情况下,省略号居然又没啦!!! 简单实现 max-width: 75px;displa ...
- CSS -文本溢出显示省略号
单行文本溢出 .hidden {overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)white-space: nowrap;(设置文字在一行显示,不能换行)text-overf ...
- 学习css文本溢出显示省略号?
一.写在前面 今天携程面试,问题是这样的有一个span标签,其宽度为100px,我们需要给其设置文本,并且让其单行显示,超出部分使用省略号表示,当我们鼠标悬停在说上面的时候,然后再进行展示全部文本.但 ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
- 关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号 单行文本溢出显示省略号 方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
- CSS实现文本溢出显示省略号
html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
最新文章
- 【 C 】字符串查找基础笔记
- mysql 报错 sql_mode=only_full_group_by 解决方法
- 有机发光二极管显示器测试方法_研究人员证明有机激光二极管将不再是梦
- 更换桌面壁纸的小工具。
- Invalid signature file digest for Manifest main attributes
- java 多项式拟合最多的项数_Matlab概率统计与曲线拟合
- 【公告】社区周刊即日起停刊
- activiti 工作流_JAVA-工作流引擎-activiti-Tasks介绍
- Python编程一定要注意的那些“坑”(四)
- JMeter性能测试-安装与入门
- wireshark之不显示ip问题(五)
- shell 获取当前日期时间
- 微信 JSAPI 支付流程
- Navicat安装问题及解决办法
- rf扫描枪_RF枪(RF手持扫描枪)是什么,有什么用途?
- HTML5七夕情人节表白网页制作【一起跨年表白代码】HTML+CSS+JavaScript
- 音效管理android,Android之声音管理器《AudioManager》的使用以及音量控制
- 「C++小游戏教程」基本技巧(1)——随机化
- 中国“钱”途光明10所大学
- KISSY基础篇乄KISSY简介