css怎么实现超出两行显示省略


本文摘自PHP中文网,作者藏色散人,侵删。

css实现超出两行显示省略的方法:首先创建一个HTML示例文件;然后在body中定义好文字内容;最后在style中通过设置属性“-webkit-line-clamp: 2;overflow: hidden;”来实现超出省略效果。

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

CSS实现文本超过部分,超出两行,超出部分省略号显示

文字超过部分显示为省略号

1

2

3

4

5

6

7

8

9

10

11

12

13

<style>

.p{

    width: 200px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

</style>

<body>

    <p class="p">

        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本

    </p>

</body>

文本超出两行,超出部分省略号显示

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<style>

.p{

    width: 200px;

    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2; /* 这里是超出几行省略 */

    overflow: hidden;

}

</style>

<body>

    <p class="p">

        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本

    </p>

</body>

推荐学习:《css视频教程》

以上就是css怎么实现超出两行显示省略的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css的sass样式应该怎么使用

css书写顺序需要注意哪些?

css中的bootstrap是指什么

给元素设置圆角半径的css属性是什么

css中zoom属性有什么作用

css的font字体颜色如何设置

css删除线颜色怎么设置

css如何设置圆角边框

css怎么去掉border的底部

css中rem有什么特点

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...