div内文字的溢出部分用省略号...显示

ゞ浴缸里的玫瑰 2022-09-04 07:57 215阅读 0赞

# 单行 #

![20210812111054413.png][]

<div
            style="
              width: 200px;
              overflow: hidden;
              border: 1px solid white;
    
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿
          </div>

# 多行： #

![20210812111109286.png][]

<div
            style="
              width: 200px;
              overflow: hidden;
              border: 1px solid white;
    
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            "
          >
            啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿
          </div>

>  *  overflow:hidden; //超出的文本隐藏
>  *  text-overflow:ellipsis; //溢出用省略号显示
>  *  white-space:nowrap; //溢出不换行
>  *  display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
>  *  \-webkit-box-orient:vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
>  *  \-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

[20210812111054413.png]: /images/20220829/6cfd09d68c07469eb1feb5f49b63b684.png
[20210812111109286.png]: /images/20220829/633e9680117f485aafb711586fcf132b.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css 实现div内显示固定三行，超出部分用省略号显示

css 实现div内显示两行或三行，超出部分用省略号显示一、div内显示一行，超出部分用省略号显示 white-space: nowrap; o

我就是我/ 2023年01月17日 06:20/ 0 赞/ 176 阅读

相关 css文字溢出部分用省略号显示

单行文本溢出： display:block; white-space:nowrap; overflow:hidden; text-over

秒速五厘米/ 2022年12月25日 08:58/ 0 赞/ 269 阅读

相关文字溢出处理省略号显示

1. 单行文本 p{ white-space: nowrap;//禁止自动换行 overflow: hidden;

超、凢脫俗/ 2022年11月28日 00:47/ 0 赞/ 179 阅读

相关 css 设置文字溢出部分使用省略号代替

1. 块级元素 `display: block` white-space:nowrap; / 文本不换行 / overflow-

妖狐艹你老母/ 2022年11月25日 10:19/ 0 赞/ 238 阅读

相关 div内文字的溢出部分用省略号...显示

单行 ![20210812111054413.png][] <div style=" width: 200p

ゞ浴缸里的玫瑰/ 2022年09月04日 07:57/ 0 赞/ 216 阅读

相关 CSS文字溢出部分显示为省略号

CSS Code div.test { width: 200px; overflow: hidden; text-overflow: ellipsis; whit

快来打我*/ 2022年07月28日 09:14/ 0 赞/ 250 阅读

相关 css 文字超出部分显示省略号

设置table固定布局，否则自适应布局会不受控制 table{ 　　table-layout: fixed; } 单行文字：

朱雀/ 2022年04月13日 14:55/ 0 赞/ 393 阅读

相关 css 实现div内显示两行或三行，超出部分用省略号显示

一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overf

太过爱你忘了你带给我的痛/ 2022年04月13日 13:57/ 1 赞/ 793 阅读

相关 css 实现div内显示两行或三行，超出部分用省略号显示

一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; te

冷不防/ 2022年04月08日 19:07/ 0 赞/ 331 阅读

相关 css 实现div内显示一行或两行，超出部分用省略号显示

div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overf

深碍√TFBOYSˉ_/ 2021年08月19日 14:32/ 0 赞/ 485 阅读