Liaoyi

外观

本页目录

CSS 技巧总结 ​

CSS单行文字时居中，多行文字时居左 ​

  1. 父级 text-align:center，子级 inline-block + text-align:left

这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左 

<template>
  <div class="p-5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
    <div class="content">
      <p class="text">
        这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左
      </p>
    </div>
  </div>
</template>

<style scoped>
.content {
  background: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, .1);
  padding: 15px;
  font-size: 14px;
  text-align: center;
  color: rgba(60, 60, 67);
}

.text {
  display: inline-block;
  text-align: left;
}
</style>
  1. width:fit-content + margin:auto

这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左 

<template>
  <div class="p-5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
    <div class="content">
      <p class="text">
        这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左
      </p>
    </div>
  </div>
</template>

<style scoped>
.content{
  background: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 15px rgba(0,0,0,.1);
  padding: 15px;
  font-size: 14px;
}
/* https://caniuse.com/?search=%20width%3A%20fit-content */
.text{
  width: fit-content;
   width: -moz-fit-content;
   margin: 0 auto;
   color: rgba(60, 60, 67);
}
</style>
  1. position:relative + transform

这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左 

<template>
  <div class="p-5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
    <div class="content">
      <p class="text">
        这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左
      </p>
    </div>
  </div>
</template>

<style scoped>
.content{
  background: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 15px rgba(0,0,0,.1);
  padding: 15px;
  font-size: 14px;
  position: relative;
  color: rgba(60, 60, 67);
}
.text{
  display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
</style>
  1. display:table + margin:auto

这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左 

<template>
  <div class="p-5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
    <div class="content">
      <p class="text">
        这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左
      </p>
    </div>
  </div>
</template>

<style scoped>
.content{
  background: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 15px rgba(0,0,0,.1);
  padding: 15px;
  font-size: 14px;
  color: rgba(60, 60, 67);
}
.text{
  display: table;
  margin: 0 auto;
}
</style>
  1. flex 和 grid 实现

flex实现: 这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左

grid实现:这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左 

<template>
  <div class="flex flex-col gap-4 rounded-lg p-5 bg-gradient-to-r from-purple-500 to-pink-500">
    <p class="text_flex">
      flex实现: 这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左
    </p>
    <p class="text_grid">
      grid实现:这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左
    </p>
  </div>
</template>

<style scoped>
.text_flex{
  background: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 15px rgba(0,0,0,.1);
  padding: 15px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  color: rgba(60, 60, 67);
}
.text_grid{
  background: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 15px rgba(0,0,0,.1);
  padding: 15px;
  font-size: 14px;
  display: grid;
  justify-items: center;
  color: rgba(60, 60, 67);
}
</style>

CSS实现文本两端对齐 ​

在移动端表单UI中, 表单设计稿通常是左侧 label 文字左右对齐的效果,很长的一段时间里,我都是使用手动加 空格的方式來实现,这种方案虽然也能完成,但是不够优雅.

1. 使用空格实体字符实现文本两端对齐 ​

姓  名： Liaoyi
手 机 号： 13246566486
电子邮箱： liaoyi@1998.com
<template>
  <div>
    <div>姓&emsp;&emsp;名： Liaoyi</div>
    <div>手&ensp;机&ensp;号： 13246566486</div>
    <div>电子邮箱： liaoyi@1998.com</div>
  </div>
</template>

2. 使用 text-align:justify ​

  • 联系人
  • 性别
  • 手机号
  • 选择地区
  • 收货地址
  • 门牌号
<template>
  <div>
    <div class="p-5">
      <ul class="!list-none flex flex-col">
        <li>
          <span>联系人</span>
          <input type="text" placeholder="请输入收货人姓名">
        </li>
        <li class="felx items-center">
          <span>性别</span>
          <label for="male">
            <input id="male" type="radio" name="sex" value="0" checked>男
          </label>
          <label for="female">
            <input id="female" type="radio" name="sex" value="1">女
          </label>
        </li>
        <li>
          <span>手机号</span>
          <input type="text" placeholder="请输入收货手机号">
        </li>
        <li>
          <span>选择地区</span>
          <input type="text" placeholder="请选择省市区">
        </li>
        <li>
          <span>收货地址</span>
          <input type="text" placeholder="请填写收货省市区街道">
        </li>
        <li>
          <span>门牌号</span>
          <input type="text" placeholder="例: 6号楼3单元305室">
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
span {
  display: inline-block;
  width: 4rem;
  margin-right: 8px;
  /** 两端文字对齐 */
  text-align: justify;
  text-align-last: justify;
  /** 兼容 ie */
  text-justify: distribute-all-lines;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    margin: 0;
    padding: 8px 0;

    &:not(:last-child) {
      border-bottom: 1px solid #f6f4f4;
    }
  }
}
</style>

文字视差效果 ​

parallel Background 

<template>
  <div class="min-h-40vh bg-[#ebe7e1] rounded-lg px-6 py-30 flex_ccc">
    <h1 class="parallel">
      parallel Background
    </h1>
  </div>
</template>

<style lang="scss" scoped>
.parallel {
  /* background: linear-gradient(#fe4e00 50%,lightblue 50%)
  center center / 60vw 60vh fixed; */
  background: linear-gradient(#fe4e00 50%, #0000 50%) center center / 100vw 100vh fixed;
  // height: 100vh;
  /* 设置文字颜色为透明 */
  color: transparent;
  /* 让背景图填充到文字上 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 设置文本描边 */
  -webkit-text-stroke: 2px #fe4e00;
}
h1{
  letter-spacing: normal;
  line-height: 1;
  font-size: 60px;
  font-family: Inter;
  font-weight: 700;
}
</style>