CSS樣式 解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題
發(fā)布時(shí)間：2019-12-17 15:15:49 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS樣式 解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題,本文通過(guò)實(shí)例代碼截圖給大家展示的非常詳細(xì)，需要的朋友可以參考下
一、CSS樣式 解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題
1、一般樣式
一般 css 樣式，當(dāng)寬度不夠時(shí)，可能會(huì)出現(xiàn)換行的效果。這樣的效果在某些時(shí)候肯定是不行的，可以修改 css 樣式來(lái)解決這個(gè)問(wèn)題。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<style type="text/css">
.demo-split {
width: 500px;
height: 100px;
border: 1px solid #dcdee2;
background: palegreen;
}
.demo-split-pane {
padding: 10px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="demo-split">
<Split v-model="split">
<div slot="left" class="demo-split-pane">
未使用 clip 自適應(yīng)寬度
</div>
<div slot="right" class="demo-split-pane">
未使用 ellipsis 自適應(yīng)寬度
</div>
</Split>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
split: 0.4
}
}
})
</script>
</html>
左側(cè)寬度變小，文字換行。
右側(cè)寬度變小，文字換行。
2、文字過(guò)長(zhǎng)顯示省略號(hào)或顯示截取的效果
【通常寫法：】
<style type="text/css">
.test_demo_clip {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}
.test_demo_ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}
</style>
【說(shuō)明：】
text-overflow：表示當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記，ellipsis表示省略號(hào)效果，clip 表示截取的效果。
overflow:hidden; 將文本溢出的內(nèi)容隱藏。
white-space:nowrap; 是禁止文字換行。
width： （可選）可以寫固定值，也可以根據(jù)寬度自適應(yīng)顯示效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<style type="text/css">
.test_demo_clip {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}
.test_demo_ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}
.test_demo_defined_Width_clip {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
background: bisque;
}
.test_demo_defined_Width_ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background: bisque;
}
.demo-split {
width: 500px;
height: 100px;
border: 1px solid #dcdee2;
background: palegreen;
}
.demo-split-pane {
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<h2>text-overflow : clip </h2>
<div class="test_demo_clip">
不顯示省略標(biāo)記，而是簡(jiǎn)單的裁切條
</div>
<br>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">
當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記
</div>
<br>
<h2>自定義寬度，根據(jù)寬度自適應(yīng)大小</h2>
<div class="demo-split">
<Split v-model="split">
<div slot="left" class="demo-split-pane">
<div class="test_demo_defined_Width_clip">
使用 clip 自適應(yīng)寬度
</div>
</div>
<div slot="right" class="demo-split-pane">
<div class="test_demo_defined_Width_ellipsis">
使用 ellipsis 自適應(yīng)寬度
</div>
</div>
</Split>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
split: 0.4
}
}
})
</script>
</html>
clip 顯示裁剪的效果，ellipsis 顯示省略號(hào)的效果。
總結(jié)
以上所述是小編給大家介紹的CSS樣式 解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例
這篇文章主要介紹了css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-13
本篇文章主要介紹了純CSS定制文本省略的方法大全，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-16css3實(shí)現(xiàn)漸變、陰影、超出指定文本省略號(hào)顯示等一些效果實(shí)例
下面小編就為大家?guī)?lái)一篇css3實(shí)現(xiàn)漸變、陰影、超出指定文本省略號(hào)顯示等一些效果實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-10CSS實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)的方法
這篇文章主要介紹了CSS實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)的方法,并且講解了針對(duì)單行文字溢出和多行文字溢出的情況,需要的朋友可以參考下2016-05-27
