Article From:https://segmentfault.com/q/1010000011700305
Question:

Figure: When the text exceeds 5 lines, display “Expand All” at the end, requiring each resolution model to display “Expand All” at the end. Then, if I judge when the text is too few, I do not say “unfold all.”

cssFor:

Answer 0:

The following code shows
Limit maximum height to code block, Overflow Hidden
No more than four rows.
When the five row is displayed, expand all.
Click to expand all, add div class show-more
Cancel maximum height limit

<div>
    Commentary, text review, text review, text review, text review, text review, text commentary< span> expand all < span>< div>
div {
    line-height: 18px;
    max-height:90px;
    overflow:hidden;
    position:relative;
}
div span {
    position:absolute;
    right: 0;
    top: 72px;
    line-height: 18px;
    background-color: white;
}
div.show-more {
    max-height:none;
}
div.show-more span {
    top: unset;
    bottom: 0;
}

Answer 1:

It should not be possible to simply use css, using JS to determine whether the offset height of text is less than or equal to the line height of text * 5, is the words hidden, not the words displayed

Answer 2:

https://mp.weixin.qq.com/s?__…

However, it is recommended that the number of characters be judged by JS or when the output is directly back-end.

Answer 3:

Judging the font size and line height of the element by js, this allows the width to calculate the total number of M fonts per line, adding that you need more than N lines to displayexpand all,That’s one.n*mA font, so you can know when to show and when to hide.

Answer 4:

http://blog.csdn.net/qq_30668…

Answer 5:

If you only use CSS, there is an idea: selection: after selecting, the text box is highly changed.
JS control is recommended.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *