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怎么设置微软雅黑

如何使用css设置框架内文本的垂直位置

css的用法有哪些

css 粘性定位 sticky 详解

聊聊css 与 js 是如何阻塞 dom 解析和渲染的

css怎么设置div大小?

css元素选择器的运作原理介绍

移动端全景装修图的实现实例分享

css文本域怎么写

css最大的优点是什么

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




打赏

取消

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

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

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

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

评论

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