共计 5114 个字符,预计需要花费 13 分钟才能阅读完成。
前言
👏CSS 文字对齐与字符间距的解决,在这里,你能够理解到文字突变,letter-spacing,text-align,text-align-last,filter 等,速速来 Get 吧~
🥇 文末分享源代码。记得点赞 + 关注 + 珍藏!
1. 实现成果
2. 实现原理
- 文章开始之前,让咱们先学习一下实现原理
2.1 文字渐变色的实现
实现文字渐变色的办法有多种,在这里,咱们用办法一实现,其余办法暂不赘述:
- 办法一:background-clip+ 背景渐变色 +color/text-fill-color 设置为通明
- 办法二: 伪元素 +mask 遮罩
- 办法三:SVG
为文字设置背景渐变色:
background: linear-gradient(180deg, red 0%, #4effe4 100%);
将背景裁剪为文字:
background-clip:text,背景被裁剪成文字的前景色。
/* 将背景裁剪为文字 */
background-clip: text;
-webkit-background-clip: text;
设置 text-fill-color 或者 color 为通明
text-fill-color:CSS 属性 -webkit-text-fill-color 指定了文本字符的填充色彩。若未设置此属性,则应用 color 属性的值。
/* 设置 color 为通明 */
color: transparent;
/* 或者设置 text-fill-color 为通明 */
/* -webkit-text-fill-color: transparent; */
2.2 filter 增加文字投影
filter:CSS 属性 filter 将含糊或色彩偏移等图形成果利用于元素。滤镜通常用于调整图像、背景和边框的渲染。
drop-shadow():drop-shadow()
函数对输出图像利用暗影成果。暗影能够设置含糊度的,以特定色彩画出的遮罩图的偏移版本,最终合成在图像上面
- 以下,是一个木有投影的文字
- 为其增加投影
filter: drop-shadow(0px 2px 4px red);
2.3 letter-spacing 最初字符间距的解决
letter-spacing:CSS 的 letter-spacing 属性用于设置文本字符的间距体现。在渲染文本时增加到字符之间的天然间距中。letter-spacing 的正值会导致字符散布得更远,而 letter-spacing 的负值会使字符更靠近。
- 为文字设置 letter-spacing,能够看到设置的值越大,文本的最初也会显示相应的字符
font-size: 40px;
font-family: YouSheBiaoTiHei;
letter-spacing: 20px;
border: 1px dotted;
- 将文字拆分为两局部,用 span 标签包裹,最初一个字 + 残余其余字,如:‘这是一段文’,‘字’
<p>
<span> 这是一段文 </span>
<span> 字 </span>
</p>
- 将第一个 span 设置 letter-spacing,去掉父元素设置的 letter-spacing,能够看到文字开端的间距不存在了
--letter-spacing: 20px;
<p>
<span style="letter-spacing: 12px;"> 这是一段文 </span>
<span> 字 </span>
</p>
- span 与 span 标签之间的空格或换行造成了肯定的间距,能够通过一些办法来解决
- 办法一:将 span 写在一行,局限:可能在格式化或其他人接手时候不小心批改
- 办法二:设置 font-size 为 0,并增加额定的 font-size,局限:重写比拟麻烦
- 办法三:父元素设置 flex 布局,局限: 可能使某些数据生效,如 align-last
- 办法四:span 写在一行,并在两头增加正文,局限:可能被别人批改,然而有正文会略微好点
- 咱们通过办法四来解决间距问题
<p>
<span style="letter-spacing: 12px;"> 这是一段文 </span><!-- 打消间距 --><span> 字 </span>
</p>
2.4 text-align 两端对齐的应用
这 text-align:text-align CSS 属性定义行内内容(例如文字)如何绝对它的块父元素对齐。text-align 并不管制块元素本人的对齐,只管制它的行内内容的对齐。
text-align: justify 文字向两侧对齐,对最初一行有效。
text-align: justify-all 和 justify 统一,然而强制使最初一行两端对齐。为实验性,暂不失效
text-align: left;// 行内内容向左侧边对齐。text-align: right;// 行内内容向右侧边对齐。text-align: center;// 行内内容居中。text-align: justify;// 文字向两侧对齐,对最初一行有效。text-align: justify-all;// justify 统一,然而强制使最初一行两端对齐。text-align: start;// 如果内容方向是左至右,则等于 left,反之则为 right。text-align: end;// 如果内容方向是左至右,则等于 right,反之则为 left。text-align: match-parent;// 和 inherit 相似,区别在于 start 和 end 的值依据父元素的 direction 确定,并被替换为失当的 left 或 right。
- 联合 2.3 的 demo,接着往下进行,为父元素设置足够长的宽度
+ width: 600px;
- 为其设置 text-align,设置 justify,实现两端对齐,能够发现,木有成果,因为 justify 对最初一行有效。那如何实现呢?
- 办法一:通过 text-align-last,局限:兼容性问题
text-align-last:CSS 属性 text-align-last 形容的是一段文本中最初一行在被强制换行之前的对齐规定。
text-align-last:justify 最初一行文字的结尾与内容盒子的左侧对齐,开端与右侧对齐。
+ text-align: justify;
+ text-align-last: justify;
- 办法二:增加内联伪元素,父元素设置 text-align
div::after{
content: '';
display: inline-block;
width: 100%;
}
- 伪元素使得高度变多了,为父元素设置高度
div{
text-align: justify;
height:52px;
}
3. 实现步骤
- 父元素定义为 section
<section>
</<section>
section {
cursor: default;
display: inline-block;
}
- 依据 2.1 章节实现文字渐变色,在 section 标签下增加 p 标签
<p class="title" id="title">
<span id="item1"> 工欲善其事必先利其器 </span>
</p>
.title{
font-family: YouSheBiaoTiHei;
font-size: 44px;
line-height: 57px;
background: linear-gradient(180deg, #d0dae2 0%, #ffffff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
- 依据 2.2 章节为 title 实现文字投影
.title{filter: drop-shadow(0px 2px 4px #000);
}
- 依据 2.3 章节解决 letter-spacing 最初一个字符间距
<span id="item1"> 工欲善其事必先利其 </span><!-- 打消间距 --><span id="item2"> 器 </span>
.title span:nth-child(1) {letter-spacing: 12px;}
- title 增加伪元素,实现渐变色下划线
.title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(270deg,
rgba(72, 85, 100, 0) 0%,
#637992 51%,
rgba(72, 85, 100, 0) 100%);
}
- 与 title 元素同级别,增加英文字符
<p class='title'>xxx</p>
<p class="en-title">
SHARP TOOLS MAKES GODD WORK (Never too old to learn)
</p>
.en-title {
font-size: 12px;
color: #8e939a;
line-height: 13px;
letter-spacing: 2px;
}
- 依据 2.4 章节,为 section 增加 text-align 设置,这里抉择办法一(如果抉择办法二,须要独自对每行文字设置,不能间接设置在父元素上)
section{
text-align: justify;
align-last: justify;
}
- 为 section 增加 hover 事件,鼠标悬浮,文字字体放大;title 设置过渡成果,就实现了 \~
section:hover .title {font-size: 48px;}
.title {transition: all 0.5s ease-in-out;}
4. 实现代码
<style>
section {
cursor: default;
display: inline-block;
text-align: justify;
text-align-last: justify;
}
.title {
font-family: YouSheBiaoTiHei;
font-size: 44px;
line-height: 57px;
background: linear-gradient(180deg, #d0dae2 0%, #ffffff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
margin-bottom: 10px;
transition: all 0.5s ease-in-out;
filter: drop-shadow(0px 2px 4px #000);
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(270deg,
rgba(72, 85, 100, 0) 0%,
#637992 51%,
rgba(72, 85, 100, 0) 100%);
}
.title span:nth-child(1) {letter-spacing: 12px;}
.en-title {
font-size: 12px;
color: #8e939a;
line-height: 13px;
letter-spacing: 2px;
font-family: "D-DIN";
}
section:hover .title {font-size: 48px;}
</style>
<body>
<section>
<p class="title" id="title">
<span id="item1"></span><!-- 打消间距 --><span id="item2"></span>
</p>
<p class="en-title">
SHARP TOOLS MAKES GODD WORK (Never too old to learn)
</p>
</section>
</body>
<script>
// 题目字数有限度
const init = (title) => {const dom1 = document.getElementById("item1");
const dom2 = document.getElementById("item2");
const titleBox = document.getElementById("title");
titleBox.dataset.title = title;
dom1.innerHTML = title.slice(0, -1);
dom2.innerHTML = title.slice(-1);
}
init('工欲善其事必先利其器');
</script>