CSS text overflow

The CSS text-overflow property specifies how undisplayed overflow content should be rendered to the user. Can be clipped or rendered as an ellipsis (…). .

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid # 000000;
  overflow: hidden;
  text-overflow: clip; 
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid # 000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}
Copy the code

Overflow: Hidden needs to be set first

The following example shows how to display overflow content when hovering over an element:

<! DOCTYPEhtml>
<html>
<head>
<style> 
div.test {
 white-space: nowrap; 
 width: 200px; 
 overflow: hidden; 
 border: 1px solid # 000000;
}

div.test:hover {
 overflow: visible;
}
</style>
</head>
<body>

<p>Move your mouse over the div below to see the full text.</p>
<div class="test" style="text-overflow:ellipsis;">There's some long text that doesn't fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">There's some long text that doesn't fit in the box</div>

</body>
</html>
Copy the code

CSS Word wrap

The CSS word-wrap property enables long text to be broken and moved to the next line.

Grammar:

word-wrap: normal|break-word;
Copy the code
value describe
normal Newline only at permitted hyphenation points (the browser keeps default processing). (The first text box above)
break-word Wrap lines inside long words or URLS. (The second text box above)

CSS newline rules

The CSS word-break property specifies the line break rule.

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}
Copy the code

CSS writing mode

The CSS writing-mode property specifies whether lines of text should be placed horizontally or vertically.