Ask questions ⁉

Q1. Why set text-overflow: ellipsis; But it doesn’t work?

Q2. After setting the width, add a style padding-left:12px; Will the right-hand side go beyond 12px?

Answer 😍

A1. Must set width: 80px; And overflow: hidden; And white – space: nowrap; Restrict line display

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title> Ellipsis </ style>. Content {width: 80px; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; border: 1px solid gray; } </style> </head> <body> <div class="content">this is test for ellipsis</div> </body> </html>Copy the code

In addition, if it is multiple lines with ellipsis, there are two situations. The first is to display a limited number of lines (e.g., 3 lines).

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title> Ellipsis </ style>. Content {width: 80px; text-overflow: ellipsis; /* white-space:nowrap; */ overflow:hidden; border: 1px solid gray; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } </style> </head> <body> <div class="content">this is test for ellipsis I need long words to show</div> </body> </html>Copy the code

The second option is to have no limit on the number of lines, so that only words that are too long need to be folded will be displayed, otherwise they will be folded until the end of the sentence

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title> Ellipsis </ style>. Content {width: 80px; text-overflow: ellipsis; overflow:hidden; border: 1px solid gray; } </style> </head> <body> <div class="content">this is test for ellipsis Ineedlongwordstoshow</div> </body> </html>Copy the code

A2. Sometimes the text needs to be too close to the border, so that you need to add space. In this case, the problem is to set the padding-left:10px; Will there be an extra 10px on the right?

If box-sizing is not set, the default value is Content-box

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title> Ellipsis </ style>. Content {width: 80px; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; padding-left: 20px; border: 1px solid gray; } </style> </head> <body> <div class="content">this is test for ellipsis Ineedlongwordstoshow</div> </body> </html>Copy the code

Width =80+20+1+1=102, width= content

If box-sizing is set to border-box

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Box-sizing: border-box; word-wrap: break-word! Important; "> < span style>. width: 80px; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; padding-left: 20px; border: 1px solid gray; } </style> </head> <body> <div class="content">this is test for ellipsis Ineedlongwordstoshow</div> </body> </html>Copy the code

Width = 58+20+1+1 = 80 width = content+padding+border

If box-sizing is too cumbersome to understand, you can set two elements to be nested

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style>.father{width: 80px; border: 1px solid gray; } .son{ padding-left: 20px; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; } </style> </head> <body> <div class="father"> <div class="son">this is test for ellipsis Ineedlongwordstoshow</div> </div> </body> </html>Copy the code

If you set margin, border, or padding to.son, the width of.father is the same as that of.son.

The above is my understanding, if there is any mistake, welcome criticism and correction.

Writing a document for the first time, although the content involved is very simple, but it is really not easy to edit, I admire the authors who always have output ❤