-webkit-line-clamp当使用text-align：justify时，省略号显示偏移量

Question

我使用以下属性在myClass 段落的第三行获取省略号

p.myClass {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 120%;
max-height: 55px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 15px;
}

省略号正在出现，但这是我面临的问题：

我的班级也在使用：

text-align: justify;

显然省略号渲染完全忽略了text-align：justify属性。 ＆＃34; ...＆＃34;出现文本无条件结束的地方。

我找到了一些使用javascript和/或自定义CSS类的变通方法。但是我想知道是否有任何解决方案只使用简单的CSS（Webkit是允许的，因为如果它只适用于Chrome，它会很好）。

Answer 1

基于-webkit-line-clamp的纯css方法，它隐藏起源＆＃34; ...＆＃34;并使用自定义div：

＆＃13;

＆＃13;

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 20px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -14px;/* -w */
    float: left;
    color: #000;
    width: 20px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

＆＃13;

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text text</div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...</div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;