This is the fifth day of my participation in the More text Challenge. For details, see more text Challenge

Text overflow omission is often used in development, in order to better remember it, now start to understand.

A single line of text displays an ellipsis

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .text {
      width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <body>
    <div class="text">A single line of text displays an ellipsis</div>
  </body>
</html>
Copy the code

  • useWhite space attributeSet no line breaks,Overflow attributesHide the excess,The text - overflow attributesAdd an ellipsis. Note that you must have a fixed width to have an effect.
  1. The white-space attribute is used to set how whitespace in an element is handled.
  2. Overflow attributesDefines how block-level formatting context is handled when the contents of an element are too large to fit. It is aOverflow - x and overflow - yThe shorthand property of.
  3. The text-overflow property determines how to signal the overflow content that is not displayed to the user. It can be clipped to show an ellipsis (‘… ‘) or display a custom string.

Multiple lines of text display ellipses

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .text {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  </style>
  <body>
    <div class="text">Single-line text displays an ellipsis. Multi-line text displays an ellipsis</div>
  </body>
</html>
Copy the code

  • Multi-line text is the mainwhite-spaceProperty to use-webkit-line-clampTo limit the number of lines of text displayed in a block element.
  1. display: -webkit-boxSet up thedivIs the elastic telescopic box model.
  2. -webkit-line-clampYou can limit the contents of a block container to a specified number of lines. It is only indisplayProperty is set to-webkit-boxor-webkit-inline-boxand-webkit-box-orientProperty is set toverticalOnly when the effect.
  3. -webkit-box-orient sets whether an element lays out its contents horizontally or vertically. This feature is not a standard, so you should pay attention to compatibility when using it.

Show the full

The easiest way is to use the title attribute that comes with HTML

<div title="Single-line text displays ellipses multi-line text displays ellipses line text displays ellipses" class="text">Single-line text displays an ellipsis. Multi-line text displays an ellipsis</div>
Copy the code

Outside the block container, create a new element to prompt the full text.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .text {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .textTitle {
      position: relative;
    }
    .textTitle::after {
      display: none;
      content: attr(data-text);
      position: absolute;
      top: -60px;
      left: 5px;

      padding: 7px 4px 6px 6px;
      border: 1px solid #bed48f;
      border-left: none;
      background-color: #effaeb;

      height: 20px;
    }
    .text:hover + .textTitle::after {
      display: block;
    }
  </style>
  <body>
    <div class="text">Single-line text displays an ellipsis. Multi-line text displays an ellipsis</div>
    <div class="textTitle" data-text="Single-line text displays ellipses multi-line text displays ellipses line text displays ellipses"></div>
  </body>
</html>
Copy the code

The main use of pseudo-classes, to get custom tags in the text. According to the features of hover, the prompt information is displayed.

Other effects

Use an ellipsis effect on the label block.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .text {
      width: 200px;
    }
    .text_desc {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .text_desc span {
      width: 50px;
      height: 20px;
      padding: 2px;
      background-color: burlywood;
    }
  </style>
  <body>
    <div class="text">
      <p class="text_desc">
        <span>FE</span>
        <span>UI</span>
        <span>UX Designer</span>
        <span>Front end engineer</span>
      </p>
    </div>
  </body>
</html>
Copy the code