h5文字超出，兩行顯示，超出顯示省略號
預期目標：文字最多顯示兩行，超出兩行的省略號顯示
實現方案：`<html>css
<head>
<style type="text/css">
.main{
width: 360px;
border: 1px solid #ccc;
overflow: hidden;
}
.child{
float: left;
height: 40px;
overflow: hidden;
padding: 10px;
background-color:blanchedalmond;
margin: 10px;
}
.itemWrap{
display:table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.item{
font-size: 12px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
overflow:hidden;
width: 80px;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-line-clamp:2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據
</div>
</div>
</div>
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據
</div>
</div>
</div>
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據
</div>
</div>
</div>
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據
</div>
</div>
</div>
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據
</div>
</div>
</div>
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據
</div>
</div>
</div>
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據
</div>
</div>
</div>
<div class="child">
<div class="itemWrap">
<div class="item">
測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據
</div>
</div>
</div>
</div>
</body>
</html>`
最終效果：html
細節描述：
text-overflow:ellipsis 控制省略號
-webkit-line-clamp:2 控制行號web
感受對你有用的話，打賞一下哈：
測試
相關文章
- 1. h5文字超出，兩行顯示，超出顯示省略號
- 2. css超出兩行顯示省略號
- 3. 文字單行顯示，多行顯示，及超出省略號
- 4. css文字超出顯示省略號
- 5. CSS實現文本顯示兩行，超出省略號...顯示
- 6. CSS文本超出兩行顯示顯示省略號
- 7. CSS實現文本顯示兩行，超出顯示省略號...
- 8. CSS控制文字顯示一行，超出顯示省略號
- 9. css文字多行顯示超出顯示省略號
- 10. 文字兩行顯示，超出顯示...
- 更多相關文章...
- • ADO 顯示 - ADO 教程
- • Thymeleaf顯示Bean的值 - Thymeleaf 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
相關文章