Summary of the text-overflow property in css

Syntax:
text-overflow: clip | ellipsis
Parameters:
clip: Do not display the omission mark (...), but simply crop
ellipsis: Display an ellipsis mark (...) when the text in the object overflows
Description:
Set or retrieve whether to use an ellipsis mark (...) to mark the overflow of the text in the object.
The corresponding script feature is textOverflow. Please see other books I have written.

Example:

div { text-overflow : clip; }

How to achieve the text-overflow effect in CSS2.1

Looks good , let’s test it

<div style="width:100px;height:20px;text-overflow:ellipsis; ">a b c d e f g h i j k l , msa sd sd sa w df f </div> 
<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

The display is normal at this time
The text-overflow attribute is only annotation, whether to display the omission mark when the text overflows. There are no other style attribute definitions. We want to achieve the effect of producing an ellipsis when overflowing. You must also define: force text to be displayed in one line (white-space:nowrap) and overflow content to be hidden (overflow:hidden). Only in this way can the effect of displaying ellipses in overflow text be achieved.
1. Only defining text-overflow:ellipsis; cannot achieve the ellipsis effect.
2. Define text-overflow:ellipsis; white-space:nowrap; and the ellipsis effect cannot be achieved either.
3. Follow the tutorial of 52css.com, which is the method described in this article, and apply: text-overflow:ellipsis ; white-space:nowrap; overflow:hidden; achieves the desired overflow text display ellipsis effect:

div automatically adapts to the width and uses text-overflow instance

<style> 
#all{ 
float:center; 
text-align:left; 
overflow: hidden;
} 
#a{ 
float:left; 
text-align:left; 
width:100px;height:50px; 
border:1px solid black; 
text-overflow:ellipsis; 
white-space:nowrap; 
padding-bottom: 10000px;margin-bottom: -10000px;
} 
#b{ 
float:left; 
width:40px;height:50px; 
border:1px solid black;
padding-bottom: 10000px;margin-bottom: -10000px; 
} 
</style>

The above is the detailed content of Summary of the text-overflow property in css. For more information, please follow other related articles on the PHP Chinese website!