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

ゞ浴缸里的玫瑰 2022-09-04 07:57 231阅读 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 条评论，231人围观）

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

相关阅读

相关单行溢出文字省略号显示（HTML、CSS）

单行溢出文字省略号显示（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

爱被打了一巴掌/ 2023年10月03日 13:16/ 0 赞/ 11 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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