The three css properties set the text content to exceed the part, and the ellipsis is displayed
Article Directory
foreword
This article mainly records the css style settings to display the ellipsis when the text exceeds the part 适用于input标签和普通标签文本内容超出部分省略号显示.
1. Which three attributes
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
Two, specific attribute usage
The use of the overflow attribute:
Features : You must specify a height for the block-level container, or use the non-wrap attribute to make the content wider. Attribute
value :
- visible: the default value.
- hidden: The content will be clipped and the browser will display scroll bars.
- scroll: Determined by the browser, if the content is clipped, a scroll bar will be displayed.
- auto: Specifies to integrate the value of the overflow attribute from the parent element.
Use of the white-space attribute: processing blank
attribute values in elements : commonly used
- normal: Text wrapping.
- nowrap: The text does not wrap.
Use of the text-overflow attribute:
Features : This attribute does not force overflow to occur. If the text overflows its container, the overflow and white-space
attribute values must be set :
- clip: default value, newline.
- ellipsis: show a '...' to indicate cut text
Three, use
<style>
div{
white-space:nowrap;
width:100px;
overflow:hidden;
border:1px solid #000000;
}
</style>
<div style="text-overflow:ellipsis;">
this is test text 'overflow:ellipsis'
</div>
<input style="text-overflow:ellipsis;" value="this is test text overflow:ellipsis"/>
Run example:
Summarize
If you have any questions, please point them out and learn from each other.