h5文字超出，兩行顯示，超出顯示省略號
最近接到一個需求，要求商場導航裏的文字最多顯示兩行，超出兩行的省略號顯示，查一些資料，又根據本身的需求，改了不少，直接上代碼吧javascript
<html>
<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>
效果圖以下：css
child主要是控制padding和背景顏色，浮動，itemwrap主要是爲了垂直居中，item是真正的省略號實現；html
注：在less裏引入時，必定要記得不要編譯-webkit開頭的東西，加上less註釋就行了java
/*! autoprefixer: off */ web
-webkit-box-orient: vertical;less
/*! autoprefixer: on */測試
相關文章
- 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. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章