html文字溢出

进击阿文

已于 2023-12-14 10:07:14 修改

阅读量826

点赞数

于 2021-09-23 00:54:55 首次发布

本文链接：https://blog.csdn.net/weixin_43565079/article/details/120425906

版权

CSS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

之前有被问到这一个问题：文本框输入的文本溢出，结尾用省略号替换隐藏溢出部分怎么做。当时想着应该可以结合overflow：hidden进行这个操作，具体怎么做涉及到哪些属性我也不太清楚，现在在这里总结一下。分为两种：一种是单行隐藏，一种是多行隐藏。

单行：涉及到属性

overflow:hidden

        overflow 属性规定当内容溢出元素框时发生的事情。当值为hidden内容会被修剪，并且其余内容是不可见的。

white-space:nowrap

        white-space 属性设置如何处理元素内的空白。当值为nowrap规定段落中的文本不进行换行。

text-overflow:ellipsis

        text-overflow 属性规定当文本溢出包含元素时发生的事情。当值为ellipsis显示省略符号来代表被修剪的文本。

多行：涉及到属性

display:-webkit-box

        将对象作为弹性伸缩盒子模型显示。(-webkit代表safari、chrome私有属性)

-webkit-box-orient:vertical

        Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。 box-orient 属性规定框的子元素应该被水平或垂直排列。当值为vertical从上向下垂直排列子元素。

-webkit-line-clamp:3

        限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。(必须结合上面两个属性)

overflow:hidden

代码

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding:0
        }
        html{
            width: 100%;
            height: 100%;
            
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            background: #8ac592;
            width: 800px;
            height: 160px;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
            width:360px;
        }
        .p1{
            background-color: cadetblue;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            /* transform: translateY(-100%); */
        }
        .p2{
            background-color: rgb(93, 141, 187);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        span{
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1"><span>p1</span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quasi nobis dolorem nam temporibus voluptate, corrupti ducimus explicabo sequi officia voluptatibus necessitatibus ullam molestias? Illum, nam! Velit pariatur odio laborum.</p>
        <p class="p2"><span>p2</span>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non modi ipsum fugit molestiae magni perspiciatis fugiat, eos eaque, ipsa, quas unde explicabo perferendis vero iusto. Laboriosam nam minima fugiat ipsa!</p>
    </div>
</body>
</html>