A. The original version
The original version of the text overflow when only a simple cut or cut plus sign, but it can not be truncated text checked.
CSS selectors
div {
border:1px solid #000000;
height: 80px;
width: 200px;
}
HTML tags
<!--当文字溢出的时候只做简单的裁剪-->
<div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">
overflow:hidden;white-space:nowrap;text-overflow:clip;
</div>
<!--当文字溢出的时候裁剪之后显示裁剪标记-->
<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
</div>
CUT effect
Full link
II. Upgraded
Upgrading part is done both partially broken overflow portion can be truncated when displayed at the mouse pointer is moved outside the range of truncation.
Web page source code
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html" ;charset="utf-8">
<title>文字溢出问题</title>
<head>
<style>
div.test{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
div.test:hover{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in thebox</div>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
Demonstration shows
A start page like this:
Visible, overflow section was cut off.
We move the mouse at the end of the two:
Overflow text is displayed outside the range, this is the effect we need.
