广告位联系
返回顶部
分享到

用CSS实现文字间距自适应宽度的教程

css 来源:互联网 作者:佚名 发布时间:2023-10-28 22:34:37 人浏览
摘要

项目需要开发一个仿医疗证书类的一个小卡片,用于模拟展示不同种类的证书信息,如下图片是官方的证书样例,证书的布局结构就是最上方一个大号的证书类型名称标题,下方的详细

项目需要开发一个仿医疗证书类的一个小卡片,用于模拟展示不同种类的证书信息,如下图片是官方的证书样例,证书的布局结构就是最上方一个大号的证书类型名称标题,下方的详细信息则是一个左右并列的布局结构,其中每一项信息的标题的文字间距都是根据统一的宽度进行不同的设定。证书标题与左右并列的布局结构较好解决,但是根据文本块宽度,让里面的内容文字间距自适应,这个在前端如果解决呢?

二、个人思路

首先查询CSS属性表,发现有一个用于设置字符间距的属性:letter-spacing

letter-spacing 属性增加或减少字符间的空白(字符间距)

那让我们看看letter-spacing的实际使用效果:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!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的实际效果:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!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之后的效果如何:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!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之后,效果是立竿见影,字符间距立刻自动适应了文本块宽度,进行了间距调整。

找到方法之后,接下来,我们将其运用到实际的项目开发中。

三、项目实现效果

项目实际效果如下:


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 用CSS写一个可用的冒泡排序算法

    用CSS写一个可用的冒泡排序算法
    想象在一场面试中,面试官问你你能实现冒泡排序吗?,而你的回答是当然可以,你要我用 JavaScript 实现还是 CSS? 这多酷啊! 我知道你现
  • 用CSS实现文字间距自适应宽度的教程

    用CSS实现文字间距自适应宽度的教程
    项目需要开发一个仿医疗证书类的一个小卡片,用于模拟展示不同种类的证书信息,如下图片是官方的证书样例,证书的布局结构就是最上
  • CSS中float用法介绍

    CSS中float用法介绍
    float浮动 指将指定元素悬浮于所在整体之上,即将垂直排列的元素转换为水平同行显示 平时写出的HTML是具有先后顺序的,对于这个顺序我们
  • 使用CSS还原拉斯维加斯球数字动画效果

    使用CSS还原拉斯维加斯球数字动画效果
    最近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」: 场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震: 我的第一想法
  • 使用CSS实现打字机效果介绍

    使用CSS实现打字机效果介绍
    在线演示 实现 HTML 元素: 1 2 3 div class=typewriter h1 class=typingThe cat and the hat./h1 /div 实现打字机效果的关键是两个动画效果,文字出现的动画,
  • CSS网站变灰的实现方法介绍
    方法 1:使用 filter 属性 CSS 的filter属性提供了一种简单的方法来实现这一点。 1 2 3 html { filter: grayscale(100%); } 或者,如果你想要对整个页面应
  • CSS点击切换或隐藏盒子的卷起、展开效果

    CSS点击切换或隐藏盒子的卷起、展开效果
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 template div class=main el-button @click=onCllick切换
  • css中的background-attachment属性介绍

    css中的background-attachment属性介绍
    1、background-attachment的官方说明 设置背景图像是否固定或者随着页面的其余部分滚动 这句话很简洁,简洁到我无法去理解,所以我决定用我
  • CSS实现音频播放时柱状波动效果

    CSS实现音频播放时柱状波动效果
    通过CSS的动画属性animation可以实现音频播放时的动画效果,同时配合JS操作动画的animation-play-state属性,来控制动画的暂停和播放。 网页布局
  • CSS3模拟小仓鼠一直奔跑的动画特效

    CSS3模拟小仓鼠一直奔跑的动画特效
    1. 实现思路 本文中的小仓鼠并非一个图片,而是CSS3制作而成,看上去很有意思的一个动画,但却是多个CSS3属性的组合而成。包含了 :root的
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计