Summary of custom text overflow scenarios (code)

In web pages, sometimes you will see a paragraph of text that has not been finished and is followed by an ellipsis. This is actually how text overflow is handled. This article will introduce to you the solution to multi-line text overflow.

1. Single-line text overflow is dot-dot

Single-line text overflow is the most common form. You can use text-overflow's ellipsis to achieve dot-dot. The overflow attribute is also indispensable. At the same time, it cannot be Let the container wrap, otherwise there will be no dots

.ellipsis {
   width: 300px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

2. Multi-line text overflows dots

as the content With the increase in the number, single-line text is no longer enough, and multi-line text is the most used place. Four attributes are indispensable. The most important one is -webkit-line-clamp, which directly defines the number of lines to be displayed.

.ellipsis {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 自定义的行数 */
    overflow: hidden;
}

3 .Multi-line text overflow customization

Dot-dot is the most common overflow omission method, but designers in the 21st century are no longer satisfied with using dot-dot to achieve omission. They also need to display more at the end. button, click to display the entire content. At this time, you need to think of a way. The ultimate solution below is really wonderful. Please move here and listen to the master’s explanation.

##

//dom结构
<div>
    <div>
        <div>腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
        <div>
            <div></div>
            <div>...更多</div>
        </div>
    </div>
</div>

.ellipsis {
    position: relative;
    width: 100%;
    max-height: 55px; /* h*n */
    line-height: 18px; /* h */
    overflow: hidden;
    width: 300px
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* n */
    font-size: 50px; /* w */
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 16px; /* f */
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 55px; /* h*n */
}
.ellipsis-more {
    position: relative;
    float: right;
    font-size: 16px; /* f */
    width: 50px; /* w */
    height: 18px; /* h */
    margin-top: -18px; /* -h */
    color: red
}

Related recommendations:

css single line text and multi-line overflow text ellipsis problem

CSS single line and multi-line text overflow display ellipses_html/css_WEB-ITnose

The above is the detailed content of Summary of custom text overflow scenarios (code). For more information, please follow other related articles on the PHP Chinese website!