糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

CSS 两行文字两端对齐与字符间距的处理

CSS 两行文字两端对齐与字符间距的处理

原创 新闻资讯

于 2023-08-31 11:46:43 发布

17010 浏览

前言

CSS 文字对齐与字符间距的处理,在这里,你可以了解到文字渐变,letter-spacing,text-align,text-align-last,filter等,速速来Get吧~


1.实现效果


1.gif


2.实现原理


2.1 文字渐变色的实现


实现文字渐变色的方法有多种,在这里,我们用方法一实现,其他方法暂不赘述:

  •  方法一:background-clip+背景渐变色+color/text-fill-color设置为透明

  •  方法二:伪元素+mask遮罩

  •  方法三:SVG

  •  为文字设置背景渐变色:


2.jpg

background: linear-gradient(180deg, red 0%, #4effe4 100%);


将背景裁剪为文字:

background-clip:text,背景被裁剪成文字的前景色。


3.jpg


/* 将背景裁剪为文字 */
background-clip: text;
-webkit-background-clip: text;

设置text-fill-color或者color为透明

text-fill-color:CSS 属性 -webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性,则使用 color 属性的值。


4.jpg

/* 设置color为透明 */
color: transparent;
/* 或者设置text-fill-color为透明 */
/* -webkit-text-fill-color: transparent; */


2.2 filter添加文字投影

filter:CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

drop-shadow():drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的,以特定颜色画出的遮罩图的偏移版本,最终合成在图像下面


5.jpg


以下,是一个木有投影的文字


6.jpg


为其添加投影


7.jpg

filter: drop-shadow(0px 2px 4px red);


2.3 letter-spacing最后字符间距的处理

letter-spacing:CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远,而 letter-spacing 的负值会使字符更接近。


8.gif


为文字设置 letter-spacing,可以看到设置的值越大,文本的最后也会显示相应的字符


9.jpg

font-size: 40px;
font-family: YouSheBiaoTiHei;
letter-spacing: 20px;
border: 1px dotted;

将文字拆分为两部分,用span标签包裹,最后一个字+剩余其他字,如:‘这是一段文’,‘字’


10.jpg

<p>
 <span>这是一段文</span>
 <span>字</span>
</p>

将第一个span设置letter-spacing,去掉父元素设置的letter-spacing,可以看到文字末尾的间距不存在了


11.jpg

--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写在一行,并在中间添加注释 ,局限:可能被他人修改,但是有注释会稍微好点

•  我们通过方法四来解决间距问题


12.jpg

<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,接着往下进行,为父元素设置足够长的宽度


13.jpg

 + width: 600px;

•  为其设置text-align,设置justify,实现两端对齐,可以发现,木有效果,因为justify对最后一行无效。那如何实现呢?

•  方法一:通过text-align-last ,局限:兼容性问题


15.jpg


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 {
 cursor: default;
 display: inline-block;
}

根据2.1章节实现文字渐变色,在 section标签下添加p标签


16.jpg

<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实现文字投影


17.jpg

.title{
 filter: drop-shadow(0px 2px 4px #000);
}

根据2.3章节处理letter-spacing最后一个字符间距


18.jpg

<span id="item1">工欲善其事必先利其</span><!--消除间距--><span id="item2">器</span>
.title span:nth-child(1) {
    letter-spacing: 12px;
  }

title添加伪元素,实现渐变色下划线


19.jpg

.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元素同级别,添加英文字符

20.jpg

<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设置,这里选择方法一(如果选择方法二,需要单独对每行文字设置,不能直接设置在父元素上)


21.jpg

section{
 text-align: justify;
 align-last: justify;
}

为section添加hover事件,鼠标悬浮,文字字体放大;title设置过渡效果,就实现了~


22.gif

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>

css

网站建设

web前端

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情