Write it up front

  • In our daily development, we often encounter a business scenario that truncates the display of some text. It may be one or two lines, or depending on the word limit or the size of the user’s display screen.

CSS article

One: single-line text overflow processing

code

.text-ellipsis-single{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
Copy the code
  • Reactive truncation, which displays ellipsis only when text overflows.
  • Preview the Codepen case

Codepen. IO/lpove/pen/M…

Analysis of the

  • Good compatibility, but only supports one line, can simply meet the requirements of truncated text

Two: multi-line text truncation

code

  • Note the setting of line-height for multi-line text
.text-ellipsis-multiple{
    -webkit-line-clamp: 2; Display: -webkit-box; display: -webkit-box; - its - box - received: vertical; Overflow: hidden; The text - overflow: ellipsis; / / clip | ellipsis | string truncation | ellipsis | custom string}Copy the code
  • If you’re using SCSS we can customize the number of lines to use, set line-hight and max-height to the maximum line height and limit the display
@mixin multiline-ellipsis($line: 2.$line-height: 1.6 em) {
  overflow: hidden;
  text-overflow: the ellipsis; display: -webkit-box; -webkit-line-clamp:$line;
  -webkit-box-orient: vertical;
  line-height: $line-height;
  max-height: $line-height * $line;
}
Copy the code

Analysis of the

  • Compatibility problem, mobile compatibility is ok
  • This is used here-webkit-And so on the kernel method, look at the compatibility of various browsers, mobile terminal for more-webkit.
    • Caniuse.com/#search=-we…

Three: good compatibility of CSS3 scheme

code

@minxin text-ellipsis-multiple-compatibility($line: 3, $line-height: 1.6 em) {
    position:relative;
    line-height:$line-height;
    height:$line-height * $line;
    overflow:hidden;
}

.text-ellipsis-multiple-compatibility{
    @inlcude text-ellipsis-multiple-compatibility(3);
    
    &::after{
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px; }}Copy the code

Analysis of the

  • Emulating ellipses with pseudo-elements is compatible, but the presentation is somewhat problematic and may need to be fine-tuned with some javascript.

  • If English is involved, truncating words can be optimized.

.perf{
    word-break: break-all;
    word-wrap:break-word
}
Copy the code

Javascript article

A: limit the maximum word count truncation, simple single-line text implementation

  • code
// The maximum number of words is 30
function Truancate(textHolder, limit = 30) {
  let txt = textHolder.innerHTML;
  if (txt.length > limit) {
    let newText = txt.substr(0, limit) + ' ...'; textHolder.innerHTML = newText; }}Copy the code

Two: calculate the number of lines truncated multiple lines of text

Javascript method

  • Or we could do it directly
function ellipsizeTextElement($element) {
    var nodeList = document.querySelectorAll($element);
    var elements = Array.prototype.slice.call(nodeList, 0);
    elements.forEach(function(element) {
      var wordArray = element.innerHTML.split(' ');
      while (element.scrollHeight > element.offsetHeight) {
        wordArray.pop();
        element.innerHTML = wordArray.join(' ') + '... '; }}); }Copy the code

Analysis of the

  • Compatibility is good, but relatively troublesome

Additional floating CSS solution

  • Js.jirengu.com/sabipulure/…
body {
  background-color: #fff;
}

.parent {
  line-height: 20px;
  max-height: 60px;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: ' ';
    width: 20px;
    height: 60px;
    float: left;
  }
  
  &::after {
    content: '... ';
    left: 100%;
    width: 20px;
    height: 20px;
    background-color: #fff;
    float: right;
    position: relative;
    box-shadow: -4px 0 2px #fff;
    transform: translate(-100%, -100%);
  }
}

.content {
  width: 100%;
  margin-left: -20px;
  float: right;
}

Copy the code

Analysis of the

  • Pseudo elements, floating layout, keytransform: translate(-100%, -100%);Block the text at the end
  • Compatibility is very good, adjustment is more trouble, to adapt to simple needs

Use third-party libraries

  • React -truncate, react-lines-ellipsis, etc
    • Github.com/pablosicher…
    • Github.com/xiaody/reac…
  • All of these libraries are optimized for drawing text using canvas

reference

  • Caniuse.com/#search=-we…
  • Cloud.tencent.com/developer/a…