css单行文字和多行文字溢出隐藏

电玩女神 2023-02-21 06:47 2阅读 0赞

## 单行文字溢出隐藏步骤 ##

1.  强制文字一行显示

white-space: nowrap;

1.  将多余的文字隐藏

overflow: hidden;

1.  将隐藏的文字使用省略号代替

text-overflow: ellipsis;

## 多行文字溢出隐藏步骤 ##

1.  强制文字一行显示

white-space: nowrap;

1.  将多余的文字隐藏

overflow: hidden;

1.  将隐藏的文字使用省略号代替

text-overflow: ellipsis;

1.  如下属性用来辅助实现多行文字溢出显示省略号
2.  告诉浏览器你要显示多少行

-webkit-line-clamp: 4;

1.  文字显示方式,默认水平

-webkit-box-orient: vertical;

7.将盒子转为弹性盒子

display: -webkit-box;

## 注意 ##

8.纯字母 默认字母是不会换行的需要添加

word-break: break-all;

还要加一个空格或者是回车

![多行文字溢出隐藏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg2Mjk5MQ_size_16_color_FFFFFF_t_70]

![单行文字隐藏][20200629162701973.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg2Mjk5MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629162625386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg2Mjk5MQ==,size_16,color_FFFFFF,t_70
[20200629162701973.png]: https://img-blog.csdnimg.cn/20200629162701973.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 css单行文字和多行文字溢出隐藏

单行文字溢出隐藏步骤 1. 强制文字一行显示 white-space: nowrap; 1. 将多余的文字隐藏 overflow: hidden

电玩女神/ 2023年02月21日 06:47/ 0 赞/ 3 阅读

相关 un-app - 单行文字和多行文字溢出隐藏显示...（超出容器最大宽度不换行）

前言如下图所示，可控制单行或多行溢出处理。 ![在这里插入图片描述][20201224184820325.png] 实现给容器加入以下 `css` 代码：

妖狐艹你老母/ 2022年12月30日 08:26/ 0 赞/ 283 阅读

相关前端面试系列-CSS基础-div水平垂直居中&&文本居中(单行文字、多行文字)

文章目录一、div水平垂直居中 1.flex 2.position （元素已知宽高） 3.position transfo

谁借莪１个温暖的怀抱￠/ 2022年11月13日 14:28/ 0 赞/ 195 阅读

相关 css单行文本溢出的文字用省略号表示

未添加样式前：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset

系统管理员/ 2022年10月25日 14:15/ 0 赞/ 243 阅读

相关 uni-app文字溢出隐藏

![20210620142453677.png][] 文字放在text中 <view class="cardlist-content-title"> <t

本是古典何须时尚/ 2022年10月08日 05:47/ 0 赞/ 165 阅读

相关 css单行、多行文字溢出显示省略号

1、单行文字溢出显示省略号：style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" 部分浏览

痛定思痛。/ 2022年07月14日 11:44/ 0 赞/ 305 阅读

相关溢出的文字隐藏

word-break自动换行 word-break：normal | break-all | keep-all normal 使用浏览器默认的换行规则。 bre

痛定思痛。/ 2022年05月16日 11:09/ 0 赞/ 207 阅读

相关 html、css单行、多行文本溢出隐藏

单行： div{/ 单行溢出隐藏 / width: 150px; white-space: nowra

雨点打透心脏的1/2处/ 2022年05月10日 06:14/ 0 赞/ 234 阅读

相关 CSS文字溢出处理问题

单行省略 div { white-space:nowrap; //断行处理：无断行 text-overflow:ellipsis; //文字

墨蓝/ 2022年03月17日 13:00/ 0 赞/ 223 阅读

相关 css多行文字溢出隐藏为三个点(...)

对于单行文本很简单 white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

今天药忘吃喽~/ 2022年01月22日 06:45/ 0 赞/ 423 阅读