欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

一、需求描述

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

二、個人思路

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

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

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

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

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

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

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

讓我們看看屬性text-align的實際效果：

<!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并沒有達到我們想要的字符間距自適應(yīng)文本塊寬度的效果，這是為什么呢？

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

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

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

屬性值

值描述
auto默認值。最后一行被調(diào)整，并向左對齊。
left最后一行向左對齊。
right最后一行向右對齊。
center最后一行居中對齊。
justify最后一行被調(diào)整為兩端對齊。
start最后一行在行開頭對齊（如果 text-direction 是從左到右，則向左對齊；如果 text-direction 是從右到左，則向右對齊）。
end最后一行在行末尾對齊（如果 text-direction 是從左到右，則向右對齊；如果 text-direction 是從右到左，則向左對齊）。
initial設(shè)置該屬性為它的默認值。
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之后，效果是立竿見影，字符間距立刻自動適應(yīng)了文本塊寬度，進行了間距調(diào)整。

找到方法之后，接下來，我們將其運用到實際的項目開發(fā)中。

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

項目實際效果如下：

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

相關(guān)文章

最新評論