css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现:
div { // 单行
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div { // 多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 注意不是flex
-webkit-line-clamp:; // 指定行数
-webkit-box-orient: vertical; // box元素排列水平方式
}
css实现文本超出部分省略号显示的更多相关文章
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- css中文本超出部分省略号代替
p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- 不值一提,却又不得不提的“CSS文本超出部分省略号代替”
偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...
- CSS控制文本在一行内显示,若有多余字符则使用省略号表示
强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
- CSS实现文本超过指定长度显示省略号
<style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
随机推荐
- linux之目录文件操作
- L2-024. 部落(并查集)*
L2-024. 部落 参考博客 #include<cstdio> #include<iostream> #include<set> #include<algo ...
- 关于CMD的一些小技巧
1.cd命令无法切换路径怎么办? a)切换盘符不好使
- 实现两个矩阵相乘的C语言程序
程序功能:实现两个矩阵相乘的C语言程序,并将其输出 代码如下: #include "stdafx.h" #include "windows.h" void Mu ...
- 熟悉基本的Linux文件系统命令
修改配置是以后工作中必然经历的,要做好基础工作,两天的学习也说明了在Linux系统中修改配置的重要性,多看多学习. 每周总结学习和经验到网站上,坚持1w个小时,加油! Linux的安装环境 cen ...
- day04列表
列表 内容详细 1.列表 公共 独有方法 删除 remove pop clear del区别 强制转换 #表示多个事物 users=["lili","Joe", ...
- Java基础之枚举类型
枚举 为什么需要枚举 在Java开发过程中,有时需要定义一系列有限的数据,如:月份.星期等.<br> java1.5之前,主要通过定义一系列静态常量完成. class Genders{ p ...
- python:用wordcloud生成一个文本的词云
今天学习了wordcloud库,对<三国演义>生成了词云图片,非常漂亮.就想多尝试几个,结果发现一系列问题.最常出现的一个错误就是"UnicodeDecodeError : .. ...
- 【SpringBoot】数据库操作之整合Mybaties和事务讲解
========================8.数据库操作之整合Mybaties和事务讲解 ================================ 1.SpringBoot2.x持久化数 ...
- Linux进程调度与抢占
一.linux内核抢占介绍 1.抢占发生的必要条件 a.preempt_count抢占计数必须为0,不为0说明其它地方调用了禁止抢占的函数,比如spin_lock系列函数.b.中断必须是使能的状态,因 ...