.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允許出現半漢字截斷*/
}
.css2 {
overflow: hidden; /*自動隱藏文字*/
text-overflow: ellipsis;/*文字隱藏後添加省略號*/
white-space: nowrap;/*強制不換行*/
width: 20em;/*不允許出現半漢字截斷*/
color:#6699ff;border:1px #ff8000 dashed;
}
span{
display: inline-block;
width:60px;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
span:hover{
overflow: visible;
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允許出現半漢字截斷*/
}
.css2 {
overflow: hidden; /*自動隱藏文字*/
text-overflow: ellipsis;/*文字隱藏後添加省略號*/
white-space: nowrap;/*強制不換行*/
width: 20em;/*不允許出現半漢字截斷*/
color:#6699ff;border:1px #ff8000 dashed;
}
span{
display: inline-block;
width:60px;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
span:hover{
overflow: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div class="css1">歡迎來到點點滴滴的博客進行技術切磋</div>
<div class="css2">歡迎來到點點滴滴的博客進行技術切磋歡迎來到點點滴滴的博客進行技術切磋<</div>
<span>
文字溢出效果顯示與隱藏的測試
</span>
</body>
</html>
