亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

巧用CSS實(shí)現(xiàn)文字間距自適應(yīng)寬度

  發(fā)布時(shí)間：2023-10-20 14:24:28   作者：了不起的小明   我要評(píng)論
項(xiàng)目需要開發(fā)一個(gè)仿醫(yī)療證書類的一個(gè)小卡片，用于模擬展示不同種類的證書信息，證書標(biāo)題與左右并列的布局結(jié)構(gòu)較好解決，但是根據(jù)文本塊寬度，讓里面的內(nèi)容文字間距自適應(yīng)，這個(gè)在前端如果解決呢？本文將給大家介紹如何巧用CSS實(shí)現(xiàn)文字間距自適應(yīng)寬度

一、需求描述

項(xiàng)目需要開發(fā)一個(gè)仿醫(yī)療證書類的一個(gè)小卡片，用于模擬展示不同種類的證書信息，如下圖片是官方的證書樣例，證書的布局結(jié)構(gòu)就是最上方一個(gè)大號(hào)的證書類型名稱標(biāo)題，下方的詳細(xì)信息則是一個(gè)左右并列的布局結(jié)構(gòu)，其中每一項(xiàng)信息的標(biāo)題的文字間距都是根據(jù)統(tǒng)一的寬度進(jìn)行不同的設(shè)定。證書標(biāo)題與左右并列的布局結(jié)構(gòu)較好解決，但是根據(jù)文本塊寬度，讓里面的內(nèi)容文字間距自適應(yīng)，這個(gè)在前端如果解決呢？

二、個(gè)人思路

首先查詢CSS屬性表，發(fā)現(xiàn)有一個(gè)用于設(shè)置字符間距的屬性：letter-spacing

letter-spacing 屬性增加或減少字符間的空白（字符間距）

那讓我們看看letter-spacing的實(shí)際使用效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

可以看到letter-spacing確實(shí)有調(diào)整字符間距的效果，但是需要設(shè)置一個(gè)固定的間距值，這與我們根據(jù)文本塊寬度自適應(yīng)調(diào)整文本間距的需求不符，所以考慮其他辦法。

我們繼續(xù)查詢CSS屬性表，發(fā)現(xiàn)屬性：text-align也可以調(diào)整字符的間距，是通過調(diào)整文本的對(duì)齊方式來達(dá)到調(diào)整字符間距的目的。官方對(duì)屬性text-align及其屬性值是這么描述的：

text-align屬性指定元素文本的水平對(duì)齊方式

值描述
left把文本排列到左邊。默認(rèn)值：由瀏覽器決定。
right把文本排列到右邊。
center把文本排列到中間。
justify實(shí)現(xiàn)兩端對(duì)齊文本效果。
inherit規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值。

讓我們看看屬性text-align的實(shí)際效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
h1.c {text-align:center; width: 400px; background-color: red; color: #fff}
h1.j {text-align:justify; width: 400px; background-color: red; color: #fff}
</style>
</head>
<body>
<h1 class="c">This is heading 1</h1>
<h1 class="j">This is heading 2</h1>
</body>
</html>

我們發(fā)現(xiàn)設(shè)置text-align:justify并沒有達(dá)到我們想要的字符間距自適應(yīng)文本塊寬度的效果，這是為什么呢？

我通過查詢相關(guān)資料發(fā)現(xiàn)，原來還需要設(shè)置一個(gè)屬性text-align-last，才能夠達(dá)到字符間距自適應(yīng)文本塊寬度的效果。官方對(duì)于該屬性的描述如下：

text-align-last 屬性規(guī)定如何對(duì)齊文本的最后一行

**注意：**text-align-last 屬性只有在 text-align 屬性設(shè)置為 "justify" 時(shí)才起作用

屬性值

值描述
auto默認(rèn)值。最后一行被調(diào)整，并向左對(duì)齊。
left最后一行向左對(duì)齊。
right最后一行向右對(duì)齊。
center最后一行居中對(duì)齊。
justify最后一行被調(diào)整為兩端對(duì)齊。
start最后一行在行開頭對(duì)齊（如果 text-direction 是從左到右，則向左對(duì)齊；如果 text-direction 是從右到左，則向右對(duì)齊）。
end最后一行在行末尾對(duì)齊（如果 text-direction 是從左到右，則向右對(duì)齊；如果 text-direction 是從右到左，則向左對(duì)齊）。
initial設(shè)置該屬性為它的默認(rèn)值。
inherit從父元素繼承該屬性。

那讓我們試試加入屬性text-align-last之后的效果如何：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
h1.c {text-align:center; width: 400px; background-color: red; color: #fff}
h1.j {text-align:justify; text-align-last:justify; width: 400px; background-color: red; color: #fff}
</style>
</head>
<body>
<h1 class="c">This is heading 1</h1>
<h1 class="j">This is heading 2</h1>
</body>
</html>

可以看到，加入屬性text-align-last之后，效果是立竿見影，字符間距立刻自動(dòng)適應(yīng)了文本塊寬度，進(jìn)行了間距調(diào)整。

找到方法之后，接下來，我們將其運(yùn)用到實(shí)際的項(xiàng)目開發(fā)中。

三、項(xiàng)目實(shí)現(xiàn)效果

項(xiàng)目實(shí)際效果如下：

以上就是巧用CSS實(shí)現(xiàn)文字間距自適應(yīng)寬度的詳細(xì)內(nèi)容，更多關(guān)于CSS文字間距自適應(yīng)寬度的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論