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
- use
White space attribute
Set no line breaks,Overflow attributes
Hide the excess,The text - overflow attributes
Add an ellipsis. Note that you must have a fixed width to have an effect.
- The white-space attribute is used to set how whitespace in an element is handled.
Overflow attributes
Defines how block-level formatting context is handled when the contents of an element are too large to fit. It is aOverflow - x and overflow - y
The shorthand property of.- 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 main
white-space
Property to use-webkit-line-clamp
To limit the number of lines of text displayed in a block element.
display: -webkit-box
Set up thediv
Is the elastic telescopic box model.-webkit-line-clamp
You can limit the contents of a block container to a specified number of lines. It is only indisplay
Property is set to-webkit-box
or-webkit-inline-box
and-webkit-box-orient
Property is set tovertical
Only when the effect.- -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