css 文本换行 文本溢出隐藏用省略号表示剩下内容
正常文本的显示
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
强制不换行
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
white-space: nowrap;
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
溢出隐藏 并用省略号表示
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 溢出内容由省略号表示 */
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
设置文本行数 溢出隐藏
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3; /* 指定行数*/
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
css 文本换行 文本溢出隐藏用省略号表示剩下内容的更多相关文章
- css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进
一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...
- 多行溢出隐藏显示省略号功能的JS实现
在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号
为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:
- CSS控制Span强制换行、溢出隐藏
CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- ant Table td 溢出隐藏(省略号)
1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...
- css 文字溢出隐藏 带省略号
.demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置
- css强制换行和超出隐藏实现
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...
随机推荐
- C++野指针的存在方式和误区
1. char* x;这样的一定是野指针,指针声明时要直接初始化!或者置null也行! 2. int main() { char *x=new char; delete x; cout<< ...
- 图像处理——RGB-YRK-YUV-YCrCb的转换
一.和rgb之间换算公式的差异 yuv<-->rgb Y'= 0.299*R' + 0.587*G' + 0.114*B' U'= -0.147*R' - 0.289*G' + 0.436 ...
- 剑指offer 56.删除有序链表中的重复结点
56. 删除有序链表中的重复结点 题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3-> ...
- loj6278 数列分块入门题2
题意:支持区间加,询问区间中元素排名 维护两个域.一个域维护原序列,一个域维护快内排序序列. 每次修改后更新快内排序序列. 修改时O(sqrt(n)log(sqrt(n))) 询问时O(sqrt(n) ...
- wso2 使用配置
1.下载wso2 https://docs.wso2.com 2.配置 https://172.10.0.59:9443/publisher https://172.10.0.59:9443/carb ...
- AI: Uninformed search
What is a search problem: A solution to a search problem is a sequence of actions (a path) from s0 t ...
- [POI2005]KOS-Dicing (最大流+二分)lg3425
题面https://www.luogu.org/problemnew/show/P3425 题面说赢的最多的人最少赢几场,肯定是向二分的方向思考 建立源点向每一场比赛连容量为1的边,从每场比赛向参赛两 ...
- 添加一个layer
let testLayer = new TestLayer1();this.addChild(testLayer); let TestLayer1 = cc.Layer.extend({ ctor:f ...
- Application Server was not connected before run configuration stop, reason: Unable to ping server at localhost:1099
方法:把catalina.bat 文件中set JAVA_OPTS= -Xmx1024M -Xms512M -XX:MaxPermSize=256m这行去掉,具体看下面两篇博客 https://blo ...
- c#中转义字符\n和\r的区别
在c#中\n代表换行,\r代表回车,但\r是把后面的字符覆盖前面的,例: "1234\n567" 输出的是 1234 567 "1234\r567"输出的是 5 ...