Write the page encountered a small problem, how to let the div in a row of hyperlink text only display one line, the extra text hidden and add ellipses, suspended when the hidden text display? The problem was solved by discovering a new label for CSS3 text-overflow , whose properties specify what happens when the text overflows the containing element . The syntax is as follows:
text-overflow:clip|ellipsis| string;
The code is as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>demo</title>
<style>
div{
White-space:nowrap; Text in a specified paragraph does not wrap
Text-overflow:ellipsis;
Overflow:hidden;
}
div:hover{
overflow:visible;
Font-weight:bold;
}
</style>
<body>
<div style= "width:100px;border:1px solid red;" >
<a href= "#" > Text text text text literal text </a>
</div>
</body>
How to make the text in the div display only one line, the extra text hidden and the ellipsis (hyperlink form)