3.1單行文本溢出顯示省略號(hào)
必須滿足三個(gè)條件
/*1. 先強(qiáng)制一行內(nèi)顯示文本*/
white-space: nowrap; （ 默認(rèn) normal 自動(dòng)換行）
/*2. 超出的部分隱藏*/
overflow: hidden;
/*3. 文字用省略號(hào)替代超出的部分*/
text-overflow: ellipsis;
【示例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 如果文字顯示不開(kāi)自動(dòng)換行 */
/* white-space: normal; */
/* 如果文字顯示不開(kāi)也必須
1.強(qiáng)制顯示 */
white-space: nowrap;
/* 2.溢出的部分隱藏起來(lái) */
overflow: hidden;
/* 3.文字溢出用...來(lái)顯示 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>什么都不說(shuō)，此處省略一萬(wàn)字</div>
</body>
</html>
3.2多行文本溢出顯示省略號(hào)
多行文本溢出顯示省略號(hào)，有較大兼容性問(wèn)題， 適合于webKit瀏覽器或移動(dòng)端（移動(dòng)端大部分是webkit內(nèi)核）
語(yǔ)法：
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 2;
/* 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 */
-webkit-box-orient: vertical;
【示例代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 3;
/* 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>什么都不說(shuō)，此處省略一萬(wàn)字，什么都不說(shuō)，此處省略一萬(wàn)字，此處省略一萬(wàn)字</div>
</body>
</html>
更推薦讓后臺(tái)人員來(lái)做這個(gè)效果，因?yàn)楹笈_(tái)人員可以設(shè)置顯示多少個(gè)字，操作更簡(jiǎn)單。
CSS的vertical-align屬性使用場(chǎng)景: 經(jīng)常用于設(shè)置圖片或者表單(行內(nèi)塊元素)和文字垂直對(duì)齊。
官方解釋: 用于設(shè)置一個(gè)元素的垂直對(duì)齊方式, 但是它只針對(duì)于行內(nèi)元素或者行內(nèi)塊元素有效。
語(yǔ)法:
vertical-align : baseline | top | middle | bottom
3.3圖片、表單和文字對(duì)齊
圖片、表單都屬于行內(nèi)塊元素,默認(rèn)的vertical-align是基線對(duì)齊。
此時(shí)可以給圖片、表單這些行內(nèi)塊元素的vertical-align屬性設(shè)置為middle就可以讓文字和圖片垂直居中對(duì)齊了。
3.4解決圖片底部默認(rèn)空白縫隙問(wèn)題
bug : 圖片底側(cè)會(huì)有一個(gè)空白縫隙, 原因是行內(nèi)塊元素會(huì)和文字的基線對(duì)齊，如：
主要解決方法有兩種:
1.給圖片添加 vertical-align: middle | top | bottom等。 (提倡使用的)
2.把圖片轉(zhuǎn)換為塊級(jí)元素 display: block;
【示例代碼】文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-594761.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 3px solid red;
}
img {
/* 第一種 */
vertical-align: bottom;
/* 第二種 */
/* display: block; */
}
</style>
</head>
<body>
<div>
<img src="images/ldh.jpg" alt="">劉德華
</div>
</body>
</html>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-594761.html
到了這里，關(guān)于6.溢出的文字省略號(hào)顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
