The overflow part of CSS - DIV text is displayed - CSS, display, div, omitted number, overflow, Section, Text

The overflow part of the text in the div is displayed with an ellipsis, which can be summarized into two solutions, one is to solve it with CSS, and the other is to solve it with js.

One. Control the display through CSS

Display a line in the div, and display the excess part with ellipsis

Multiple lines are displayed in the div, and the excess part is displayed with ellipsis

Code:

span>

DOCTYPE html< /span>>

<html >

 <head >

 <meta  charset="utf-8">

 <title >Exampletitle>

 <style >

 /* Single line text The ellipsis is displayed at the end*/

 .div1{

 height: 100px;

 width:100px;

 background:green;

 text-overflow: ellipsis; /* ellipsis: display ellipsis to represent the trimmed text string: use the given string to represent trim Text*/

 white-space: nowrap; /* nowrap: Specifies that the text in a paragraph does not wrap*/

 overflow: hidden;  /*Hide the excess part*/

 }

 /* Multiple lines The ellipsis is displayed at the end of the text*/

 .div2{

 /* height: 100px; */

 width:100px;

 background:yellowgreen;

 display: -webkit-box; /* display: -webkit-box; must be combined with the attributes to display the object as a flexible box model span>*/

 -webkit-box-orient: vertical; /* -webkit-box-orient must be combined with attributes to set or retrieve the child elements of the telescopic box object Arrangement method*/

 -webkit-line-clamp: 5; /* -webkit-line-clamp is used to limit the number of lines of text displayed in a block element< /span>*/

 overflow: hidden;

 }

 style>

 head>

 <body >

 <div  class="div1">

 Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha

 div>

 <div  class="div2" >

 Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey

 div>

 body>

html>

Run results:

Share pictures

Two, control the display through js

Code:

DOCTYPE html>

<html >

 <head >

 <meta  charset="utf-8">

 <title >Exampletitle>

 <style  type="text/css">

 .mydiv {

 width: 150px;

 height: 200px;

 background: pink;

 }

 style>

 head>

 <body >

 <div  class="mydiv" id="demo">The text is displayed through the js operation method, so that the ellipsis at the end of the text is displayeddiv>

 <script >

 var myBox = document.getElementById(< /span>'demo');  //Get the domo object directly by id 

 var mydemoHtml = myBox.innerHTML.slice (0, < /span>20) + '< span style="background-color: #f5f5f5; color: #000000;">......' span>; // The slice() method can return selected elements from an existing array

 myBox.innerHTML =  mydemoHtml; //  fill to the specified position

 script>

 body>

html>

Run result:

share picture

DOCTYPE html>

<html >

 <head >

 <meta  charset="utf-8">

 <title >Exampletitle>

 <style >

 /* Single line text The ellipsis is displayed at the end*/

 .div1{

 height: 100px;

 width:100px;

 background:green;

 text-overflow: ellipsis; /* ellipsis: display ellipsis to represent the trimmed text string: use the given string to represent trim Text*/

 white-space: nowrap; /* nowrap: Specifies that the text in a paragraph does not wrap*/

 overflow: hidden;  /*Hide the excess part*/

 }

 /* Multiple lines The ellipsis is displayed at the end of the text*/

 .div2{

 /* height: 100px; */

 width:100px;

 background:yellowgreen;

 display: -webkit-box; /* display: -webkit-box; must be combined with the attributes to display the object as a flexible box model span>*/

 -webkit-box-orient: vertical; /* -webkit-box-orient must be combined with attributes to set or retrieve the child elements of the telescopic box object Arrangement method*/

 -webkit-line-clamp: 5; /* -webkit-line-clamp is used to limit the number of lines of text displayed in a block element< /span>*/

 overflow: hidden;

 }

 style>

 head>

 <body >

 <div  class="div1">

 Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha

 div>

 <div  class="div2" >

 Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey

 div>

 body>

html>

 DOCTYPE html>

<html >

 <head >

 <meta  charset="utf-8">

 <title >Exampletitle>

 <style  type="text/css">

 .mydiv {

 width: 150px;

 height: 200px;

 background: pink;

 }

 style>

 head>

 <body >

 <div  class="mydiv" id="demo">The text is displayed through the js operation method, so that the ellipsis at the end of the text is displayeddiv>

 <script >

 var myBox = document.getElementById(< /span>'demo');  //Get the domo object directly by id 

 var mydemoHtml = myBox.innerHTML.slice (0, < /span>20) + '< span style="background-color: #f5f5f5; color: #000000;">......' span>; // The slice() method can return selected elements from an existing array

 myBox.innerHTML =  mydemoHtml; //  fill to the specified position

 script>

 body>

html>

The overflow part of CSS – DIV text is displayed

One. Control the display through CSS

Two, control the display through js

Leave a Comment Cancel reply