Today’s article is an interesting one, with some interesting details that are omitted from the whole text.

Text is too long with dots

As we all know, as of today (2020/03/06), CSS provides two ways for us to make oversized text omissions.

For single-line text, use single-line ellipsis:

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Copy the code

The -webkit-line-clamp attribute is also very compatible for long ellipses of multiple lines of text:

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
Copy the code

CodePen Demo — inline-block implements an overflow block

Problem 1: Large chunks of text are omitted

Based on the above super long dot omission scheme, there will be some changes required. For example, we have the following structure:

<section>
    <a href="/" class="avatar"></a>
    <div class="info">
        <p class="person-card__name">Sb Coco</p>
        <p class="person-card__desc">
            <span>FE</span>
            <span>UI</span>
            <span>UX Designer</span>
            <span>Front end engineer</span>
        </p>
    </div>
</section>
Copy the code

In the case of the above overruns, we want the entire piece of text that exceeds the length of the text – the front-end engineer – to be omitted.

If we went straight to the above solution, using the following CSS, the result would be something like this, not the monolithic omission we’d expect:

.person-card__desc {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Copy the code

willdisplay: inlineInstead ofdisplay: inline-blockRealize the whole block ellipsis

Here, if we want to omit an entire block, we simply change the display of the span that encloses the entire tag element from inline to inline-block.

.person-card__desc span {
    display: inline-block;
}
Copy the code

In this way, overflow based on the whole block of content can be implemented. For the full Demo, you can poke here:

CodePen Demo – Full block with super long overflow dot ellipsis

Problem 2: iOS does not support the whole block of super long overflow dot omission

The plan is not perfect, however. After the test, the above scheme fails to take effect in iOS and Safari, as follows:

-CSS Basic User Interface Module Level 3 -text-overflow (Chrome may have done some optimization for this, so the above non-ios and Safari scenarios are normal)

So the guess is that after the display: inline-block conversion, the elements are no longer strictly inline.

Solution, use multi-line ellipsis instead of single-line ellipsis

Of course, there is still a solution after trial. We also mentioned a multi-line omission scheme at the beginning, we replaced the multi-line omission code with single line omission, only the number of lines – Webkit-line-clamp: 2 to one line- webkit-line-clamp: 1.

.person-card__desc {
    width: 200px;
    white-space: normal;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.person-card__desc span {
    display: inline-block;
}
Copy the code

In this way, it is also perfectly possible to achieve a whole block of super long dot omission in iOS/Safari:

CodePen Demo – full block overflow dot omission scheme for iOS

The -webkit-line-clamp solution should be used in conjunction with white-space: Normal to allow line wrapping, not no line wrapping. This is very important.

In this way, we achieve full compatibility with the whole block of super long dot omission.

Of course, -webkit-line-clamp itself also has certain compatibility problems, so it is still necessary to make specific choices in actual use.

The last

Ok, that’s the end of this article, a simple CSS tip, hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public number – iCSS front-end interesting 😄

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

If there are any questions or suggestions, you can communicate more, original article, writing style is limited, talent is shallow, if there is something wrong in the article, hope to inform.