关于ellipsis文本溢出显示省略号

提出问题⁉

Q1. 为什么设置了 text-overflow: ellipsis;却不生效？

Q2. 设置了宽度以后，加一个样式 padding-left:12px;那么右边会不会超出12px？

作出回答😍

A1. 必须同时设置width: 80px;和overflow:hidden; 并且white-space:nowrap; 限制一行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ellipsis</title>
    <style>
        .content{
            width: 80px;
            text-overflow: ellipsis;
            white-space:nowrap; 
            overflow:hidden; 
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div class="content">this is test for ellipsis</div>
</body>
</html>

另外，如果是多行加省略号有两种情况，第一种是显示限制行数（比如3行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ellipsis</title>
    <style>
        .content{
            width: 80px;
            text-overflow: ellipsis;
            /* white-space:nowrap;  */
            overflow:hidden; 
            border: 1px solid gray;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    </style>
</head>
<body>
    <div class="content">this is test for ellipsis I need long words to show</div>
</body>
</html>

第二种是不限制行数，这时候只有单词过于长需要折行时才会显示，否则会一直折行直到句末

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ellipsis</title>
    <style>
        .content{
            width: 80px;
            text-overflow: ellipsis;
            overflow:hidden; 
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div class="content">this is test for ellipsis Ineedlongwordstoshow</div>
</body>
</html>

A2. 有时候需要文字太过于贴到边框，需要加空隙，这时候有个问题就是设置了padding-left:10px;那右边会多出10px吗？

这时候是要看box-sizing设置的值，不设置这个属性时，默认值是content-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ellipsis</title>
    <style>
        .content{
            width: 80px;
            text-overflow: ellipsis;
            white-space:nowrap; 
            overflow:hidden; 
            padding-left: 20px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div class="content">this is test for ellipsis Ineedlongwordstoshow</div>
</body>
</html>

这时候看到我们的width=80+20+1+1=102，也就是width = content

如果box-sizing设置为border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ellipsis</title>
    <style>
        .content{
            box-sizing: border-box;
            width: 80px;
            text-overflow: ellipsis;
            white-space:nowrap; 
            overflow:hidden; 
            padding-left: 20px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div class="content">this is test for ellipsis Ineedlongwordstoshow</div>
</body>
</html>

这时候我们看到 width = 58+20+1+1 = 80 也就是 width = content+padding+border

如果实在觉得这个box-sizing理解起来太麻烦了，可以设置嵌套两个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ellipsis</title>
    <style>
        .father{
            width: 80px;
            border: 1px solid gray;
        }
        .son{
            padding-left: 20px;
            text-overflow: ellipsis;
            white-space:nowrap; 
            overflow:hidden; 
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">this is test for ellipsis Ineedlongwordstoshow</div>
    </div>
</body>
</html>

这时候在.son中不管设置margin、border、padding为多少，都不会超出.father设置的宽度。

以上是我的理解，如有错误之处，欢迎批评指正。

第一次写文档，虽然涉及的内容很简单，但编辑起来真不容易，佩服一直有输出的作者们❤