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 flex 的用途详解

css中box是什么文件

css有什么作用

如何在文字下面添加下划线

css六边形怎么画

css怎么去掉颜色

css怎么控制按钮不可用

css怎么设置fontfamily

css布局之布局模型

css实现div一直旋转的方法

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




打赏

取消

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

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

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

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

评论

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