多行文本省略

最新推荐文章于 2024-08-19 18:49:13 发布

荣心向暖

最新推荐文章于 2024-08-19 18:49:13 发布

阅读量69

点赞数

分类专栏： html/css/js学习之路文章标签： css html

本文链接：https://blog.csdn.net/weixin_46651901/article/details/131070607

版权

html/css/js学习之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章讨论了在旧版浏览器如IE11及更低版本中Flexbox的不完全支持情况，建议为了页面正常显示，可以采用display:inline-block或display:table等替代布局方法。然而，对于仅面向现代浏览器的应用，Flexbox是一个值得尝试的强大工具。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本太多省略</title>
    <style>
        div {
            margin: 100px auto;
            width: 300px;
            height: 400px;
            border: 1px solid #ccc;
            box-shadow: 0 0 2px 2px silver;
            padding: 10px 15px;
        }

        p {

            /* 超过多少行，文本自动隐藏，并且超出部分用省略号表示 */
            text-indent: 2rem;
            overflow: hidden;
            /* line-height: 2rem; 首行缩进两个字符 */
            line-height: 2rem;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*  -webkit-line-clamp: 4;  超出4行 */
            -webkit-line-clamp: 10;
            -webkit-box-orient: vertical;

        }
    </style>
</head>

<body>
    <div>
        <p>
            旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float 的 display: inline-block 或者
            display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。
            旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float 的 display: inline-block 或者
            display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。
            旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float 的 display: inline-block 或者
            display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。
    </div>

</body>

</html>