文字溢出隱藏
單行文字超出隱藏
/*單行文字超出隱藏*/
div{
width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/*
white-space：設置段落中的文字不進行換行
text-overflow：設置當文本溢出這個包含他的元素的時候做什么操作
1. clip---剪切文本
2. ellipsis---顯示省略號代替被修剪的文本
3. string---使用給定的字符串來代表被修剪的文本
*/
演示如下：
.demo{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="demo">Google 的免費翻譯服務可提供簡體中文和另外 100 多種語言之間的互譯功能</div>
多行文本超出隱藏
第一種方法：
.demo{
width: 500px;
display: -webkit-box; 將對象作為彈性伸縮盒子模型顯示
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;限制在一個塊元素中顯示文本的行數
-webkit-box-orient:vertical;設置伸縮盒子的子元素的排列方式
}
<div class="demo">從古至今,百味人生,均由語言陶字成文,冶成箴言,內心正直善良的人,用文字傳遞正能量,內心邪惡不良的人,用文字傳播負能量。 言行,體現人的素養和修為。言行，體現人的素養和修為。一個人的文字，絕大多數，也代表其內心世界。文字里的靈魂，就是其自身。善與惡，通過文字就可以體現出來。漢字，充滿靈性，簡潔明快，蘊藏着文化底蘊的美，可犀利深遠，也可柔情詩意，詮釋着風骨雄秀、生動形象的魅力，振興着積極向上的靈魂。</div>
固定寬度超出隱藏 鼠標放上去顯示所有的文字
.wrap{
width: 100px;
position: relative;
}
.title1{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.title2{
position: absolute;
top: 20px;
width: 300px;
background: red;
display: none;
}
.wrap:hover .title2{
display: block;
}
<div class="wrap">
<div class="title1">
Google 的免費翻譯服務可提供簡體中文和另外
</div>
<div class="title2">
Google 的免費翻譯服務可提供簡體中文和另外 100 多種語言之間的互譯功能
</div>
</div>
效果如下：
