CSS -文本溢出显示省略号
单行文本溢出
.hidden {overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)white-space: nowrap;(设置文字在一行显示,不能换行)text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)
}
多行文本溢出
.hidden {-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数,2 表示最多显示 2 行。为了实现该效果,它需要组合其他的 WebKit 属性)display: -webkit-box;(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )-webkit-box-orient: vertical;(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )overflow: hidden;(文本溢出限定的宽度就隐藏内容)text-overflow: ellipsis;(多行文本的情况下,用省略号 “…” 隐藏溢出范围的文本)
}
CSS -文本溢出显示省略号相关推荐
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果(text-overflow)
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- CSS文本溢出显示省略号怎么实现?
前言 我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号 代码示例: <!D ...
- css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
- vue css 文本溢出显示省略号、失效 相关问题整理
问题进阶 简单实现 打包后,居然没有效果! 注释加了,效果好了,控制台警告却亮起了(强迫症不能忍!!) 数字或英文情况下,省略号居然又没啦!!! 简单实现 max-width: 75px;displa ...
- 学习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" ...
最新文章
- Servlet3.0新特性
- C# 部署失败--上传文件缺失
- Android:TextView 自动滚动(跑马灯) (转)
- fn:substring()函数
- android 使用外部字体
- HTML学习总结(4)——表格/块/内联元素/iframe/颜色/脚本/实体
- Java函数式编程详解
- c# splitContainer1隐藏panel1/2
- 一位程序员社畜的2021闲读书单!
- AXI总线学习-------从零开始详细学-------------连载(7)读写处理架构,burst介绍,burst细节定义(burst type burst address)
- C语言实现康托尔集cantor set(附完整源码)
- ������ʾ����
- mysql表出现crash 修复_MySQL表索引损坏致Crash及修复过程实例
- 深度学习在推荐领域的应用:Lookalike 算法
- WEB 应用中的整体结构和层次关系
- 计算机科学文献中英文对照,计算机科学和技术英文文献.doc
- Leader应该招什么样的员工:能力强的?还是听话的?
- Python基础-list和tuple使用
- 提升认知能力 | 塑造大脑,重新认识你自己
- 【Android取证篇】华为手机助手备份加密的版本
热门文章
- 年轻人如何创业?有什么好的建议?
- 可重复读(Repeatable read)能防住幻读吗?
- 夸克轻站点是不是html5,比夸克好用10倍,这才是真正的良心浏览器
- android cordova 教程,【WebApp】从零开始创建Cordova for android 项目
- 任正非评华为HR胡玲事件:实名投诉是好现象,支持保护当事人
- 更改win7防火墙设置,让局域网中可以访问IIS
- cos(a+b)的展开证明
- Outlook 2010 提示禁止访问下列
- PHP MySQL 子查询(subquery)语法与用法实例
- Linux配置jdk1.8环境变量