一、案例描述

1.默认：

2.单行省略

3.多行省略

二、案例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>首页</title><link rel="shortcut icon" href="./favicon.ico" /><style>.txt {width: 400px;height: 200px;line-height: 30px;border: 1px solid red;/* 单行省略 *//* white-space: nowrap;overflow: hidden;text-overflow: ellipsis; *//* 多行省略 *//* display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical; */}</style></head><body><div class="txt">我曾经是个沉默的人，这就是说，我不喜欢在各种会议上发言，也不喜欢写稿子。这一点最近已经发生了改变，参加会议时也会发言，有时也写点稿。对这种改变我有种强烈的感受，有如丧失了童贞。这就意味着我违背了多年以来的积习，不再属于沉默的大多数了。--王小波 《理想国与哲人王》</div></body>
</html>

单行省略：

/* 单行省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行省略：

/* 多行省略 */
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

css案例10——单行文本省略、多行省略相关推荐

如何快速将合并居中的单行文本变为多行以匹配不同内容
如何快速将合并居中的单行文本变为多行以匹配不同内容 **问题:**在Excel中将合并居中的单行文本变为多行以匹配不同内容,如下图,如果数量较少,很容易处理,如果数量很多,处理起来相对麻烦,本文尝试用 ...
20 Flutter TextField单行文本和多行文本
TextField单行文本框和多行文本框 1.TextField --------基本等价于Android中EditText,其中属性都有很多一致 1.属性 const TextField({ K ...
CSS单行文本和多行文本
单行显示: p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap; } text-overflow 设置文本溢出 clip:默认 ...
css设置文字单行隐藏和多行隐藏，并用省略号表示
文字单行隐藏首先要给它设定一个宽和高,对于文字超出部分进行隐藏,多余的部分用省略号来表示. li{width: 220px;height: 20px;white-space: nowrap; //让 ...
【前端技巧】文本内容单行省略及多行省略
@Author:Outman @Date:2022-10-27 1.文本内容单行省略: .one-line-omission{/* 固定最大宽度 */max-width:200px;/* 不换行 */ ...
单行文本溢和多行文本溢出
一.单行文本溢出最常见的使用,直接贴出代码: .text {white-space: nowrap;text-overflow: ellipsis;overflow: hidden; } 二.多行文 ...
CSS单行省略和多行省略
1.单行省略: text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap; 2.多行省略 o ...
css React 单行省略和多行省略
单行省略 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 多行省略 ove ...
前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...

css案例10——单行文本省略、多行省略

一、案例描述

1.默认：

2.单行省略

3.多行省略

二、案例代码

css案例10——单行文本省略、多行省略相关推荐

最新文章

热门文章