巧用CSS实现文字间距自适应宽度
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
一、需求描述
项目需要开发一个仿医疗证书类的一个小卡片,用于模拟展示不同种类的证书信息,如下图片是官方的证书样例,证书的布局结构就是最上方一个大号的证书类型名称标题,下方的详细信息则是一个左右并列的布局结构,其中每一项信息的标题的文字间距都是根据统一的宽度进行不同的设定。证书标题与左右并列的布局结构较好解决,但是根据文本块宽度,让里面的内容文字间距自适应,这个在前端如果解决呢?
二、个人思路
首先查询CSS属性表,发现有一个用于设置字符间距的属性: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
确实有调整字符间距的效果,但是需要设置一个固定的间距值,这与我们根据文本块宽度自适应调整文本间距的需求不符,所以考虑其他办法。
我们继续查询CSS属性表,发现属性:text-align
也可以调整字符的间距,是通过调整文本的对齐方式来达到调整字符间距的目的。官方对属性text-align
及其属性值是这么描述的:
text-align属性指定元素文本的水平对齐方式
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 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>
我们发现设置text-align:justify
并没有达到我们想要的字符间距自适应文本块宽度的效果,这是为什么呢?
我通过查询相关资料发现,原来还需要设置一个属性text-align-last
,才能够达到字符间距自适应文本块宽度的效果。官方对于该属性的描述如下:
text-align-last 属性规定如何对齐文本的最后一行
**注意:**text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用
属性值
值 | 描述 |
---|---|
auto | 默认值。最后一行被调整,并向左对齐。 |
left | 最后一行向左对齐。 |
right | 最后一行向右对齐。 |
center | 最后一行居中对齐。 |
justify | 最后一行被调整为两端对齐。 |
start | 最后一行在行开头对齐(如果 text-direction 是从左到右,则向左对齐;如果 text-direction 是从右到左,则向右对齐)。 |
end | 最后一行在行末尾对齐(如果 text-direction 是从左到右,则向右对齐;如果 text-direction 是从右到左,则向左对齐)。 |
initial | 设置该属性为它的默认值。 |
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
之后,效果是立竿见影,字符间距立刻自动适应了文本块宽度,进行了间距调整。
找到方法之后,接下来,我们将其运用到实际的项目开发中。
三、项目实现效果
项目实际效果如下:
以上就是巧用CSS实现文字间距自适应宽度的详细内容,更多关于CSS文字间距自适应宽度的资料请关注程序员之家其它相关文章!
相关文章
- 这篇文章主要给大家介绍CSS设置自动滚动定位的间距的方法,文中有详细的代码示例和图文介绍,对大家的学习或工作有一定的价值,需要的朋友可以参考下2023-09-22
- 这篇文章主要给大家介绍了CSS中margin的用法和常见问题的分析,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。2017-06-28
css解决display:inline-block;产生的缝隙(间隙)的方法
本篇文章主要介绍了css解决display:inline-block;产生的缝隙(间隙)的方法,具有一定的参考价值,有需要的可以了解一下。2016-12-14- 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值,今天了解到了一条相关知识, 明白这个方法的实现原理。在此与大家分享下2013-11-20
- 在网页布局中经常会用到css控制字间距和对齐方式,有些朋友对其属性不是很熟悉,下面为大家详细介绍下,感兴趣的朋有可以参考下哈2013-06-16
- 如何设置单词字体间距?在div布局中经常会遇到这样的问题,适当的间距可以友好界面,利用闲暇时间整理了一些,有需求的朋友可以参考下2012-12-30
- HTM,CSS,怎样去掉横排图片之间的间距,是我们的一大头疼问题,于是本人搜集整理一下,晒出来和大家分享,希望可以帮助你们2012-12-11
- 我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。2010-07-04
- 网页制作Webjx文章简介:本文主要讲解如何用CSS控制网页段落行间距的三个实例:1、使用百分比设置行间距,2、使用像素值设置行间距,3、使用数值来设置行间距。2009-04-02
CSS去除表格的默认间距并且制作1px的细线表-CSS教程-网页制作-网页教学
现在在所谓“div css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。但是,我们在建立table的时候,会2008-10-17
最新评论