css 实现文本两行展示，超出部分...展示 灰太狼 2021-07-25 13:38 891阅读 0赞 ## css 两行展示 ## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1] // 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。 //文本超出部分以...形式展示 text-overflow: -o-ellipsis-lastline; //整体超出部分隐藏 overflow: hidden; //文本超出部分以...形式展示，同第一行样式代码 text-overflow: ellipsis; //display 块级元素展示 display: -webkit-box; //设置文本行数为2行 -webkit-line-clamp: 2; //设置文本行数为2行 line-clamp: 2; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-box-orient: vertical; [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/a86e2e24210a41098a227252fdf6450a.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/0c954e58ca47417089500a315a8863c9.png
还没有评论，来说两句吧...