This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

This is the 35th article in the Learning front End from Scratch series on Overflow Handling.

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

This article introduces CSS content overflow processing, mainly including the block overflow and text overflow two kinds of overflow processing.

Writing in the front

The so-called overflow is when the size of the content in the element (including text content, images, videos, etc.) exceeds the size of the box, part of the content area will be displayed outside the box area, which is the content overflow.

The overflow processing explained here mainly includes two kinds, the first is the processing of block overflow, the second is the processing of text overflow.

Piece of overflow

The property that handles block overflow in CSS is the overflow property, which is short for overflow-x and overflow-y properties. There are four common values for this attribute:

value describe
visible The default value. Content is not pruned, and the excess spills out of the element container.
hidden The content is trimmed and the rest of the content is not visible.
scroll The content is trimmed, but the browser displays a scroll bar to view the rest of the content.
auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.

If overflow is equal to scroll, the scroll bar will always be displayed.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="Width = device - width, initial - scale = 1.0">
  <title>Overflow attributes</title>
  <style>
    body {
      margin: 0;
      display: flex;
    }

    .overflow {
      width: 300px;
      height: 400px;
      background-color: lightskyblue;
      margin-left: 30px;
      margin-top: 30px;
    }

    .box {
      width: 240px;
      height: 500px;
      background-color: lightcoral;
    }

    .visible {
      overflow: visible;
    }

    .hidden {
      overflow: hidden;
    }

    .scroll {
      overflow: scroll;
    }

    .auto {
      overflow: auto;
    }

    code {
      display: block;
      text-align: center;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div class="overflow visible">
    <code>overflow: visible;</code>
    <div class="box"></div>
  </div>
  <div class="overflow hidden">
    <code>overflow: hidden;</code>
    <div class="box"></div>
  </div>
  <div class="overflow scroll">
    <code>overflow: scroll;</code>
    <div class="box"></div>
  </div>
  <div class="overflow auto">
    <code>overflow: auto;</code>
    <div class="box"></div>
  </div>
</body>

</html>
Copy the code

The running result is as follows:

Text overflow

Single line text overflow

The text-overflow property provided in the CSS sets what to do when text overflows. This property has three values, as shown in the following table:

value describe
clip Trim the text.
ellipsis Displays ellipsis to represent clipped text.
<string> Uses the given string to represent the trimmed text.

The important thing to note here is that the text-overflow property must be used in conjunction with the overflow property, and the overflow property is non-visible, otherwise the text-overflow property will be invalid.

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="Width = device - width, initial - scale = 1.0">
  <title>Single-line text overflow</title>
  <style>
    div {
      width: 80px;
      border: 1px solid #4e4e4e;
      /* Forces the text content to be output one line */
      white-space: nowrap;
      /* Overflow property to handle overflow cases */
      overflow: hidden;
      /* The text-overflow attribute must work with the overflow attribute to use the -text-overflow attribute specifically to handle text displays */
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <div>This is a long, long story</div>
</body>

</html>
Copy the code

The code run result is as follows:

Scale the page to 500%

Multiple lines overflow

The overflow of multiple lines of text in CSS is a fixed notation that can be encapsulated as a common class and used by referring to the className.

The core code is as follows:

div{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  }
Copy the code

The detailed code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="Width = device - width, initial - scale = 1.0">
  <title>Multi-line text overflow processing</title>
  <style>
    div {
      height: 60px;
      width: 400px;
      margin: 0 auto;
      border: 0.5 px. solid black;
      line-height: 20px;

      overflow: hidden;
      text-overflow: ellipsis;
      /* The display attribute value is prefixed: the display effect provided by different browsers * -webkit-box: Chrome Edge Safari provides */
      display: -webkit-box;
      /* -webkit-line-clamp property: * Note: This property is private to the WebKit kernel (other browsers may provide different properties) * sets the number of lines displayed in the text content */
      -webkit-line-clamp: 3;
      /* -webkit-box-orient attributes: * Function: vertical: indicates vertical * horizontal: indicates horizontal */
      -webkit-box-orient: vertical;
    }
  </style>
</head>

<body>
  <div>The so-called overflow is when the size of the content in the element (including text content, images, videos, etc.) exceeds the size of the box, part of the content area will be displayed outside the box area, which is the content overflow. The overflow processing explained here mainly includes two kinds, the first is the processing of block overflow, the second is the processing of text overflow.</div>
</body>

</html>
Copy the code

The code results are as follows:

{the}

Write in the last

If you are reading this, I am honored, if you like this article, you can give this article a little like; If you like this column, I will keep updating it to more than 100 posts, you can click on the link at the back to learn from the front – a bowl week column – nuggets (juejin. Cn) after entering to pay attention.

And you can give me a little attention, too.

Phase to recommend

  • – Juejin (juejin. Cn)