CSS文本处理方法

CSS开发中的经验总结

一 、文本换行总结

• 强制英文单词断行

div{
   word-break:break-all;
}

• 自动换行

div{
    word-wrap: break-word;
    word-break: normal;
}

• 强制不换行

div{
    white-space:nowrap;
}

二 、文字间距设置

h1 {letter-spacing:2px}

三 、文字缩进,首行缩进

p{
  text-indent:50px;
  }

四 、文字两端对齐

<div class="justify-text">
 <div class="li">账号</div>
 <div class="li">密码</div>
 <div class="li">电子邮件</div>
</div>
.justify-text {
 .li {
    padding: 0 20px;
    margin-top: 10px;
    width: 100px;
    background-color: #f13f84;
    line-height: 40px;
    text-align-last: justify;
    color: #fff;
    list-style: none;
    &:first-child {
    margin-top: 0;
    }
 }
}

五 、文字的排版方向

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

1. horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
2. vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
3. vertical-lr：垂直方向内内容从上到下，水平方向从左到右
4. sideways-rl：内容垂直方向从上到下排列
5. sideways-lr：内容垂直方向从下到上排列

   <div class="bruce flex-ct-x">
    <div class="vertical-text">
     <h3>诗经</h3>
     <p>
    死生契阔，<br>
    与子成说。<br>
    执子之手，<br>
    与子偕老。
    </p>
    </div>
   </div>
   .vertical-text {
    writing-mode: vertical-rl; // 文字排版方向
    h3 {
     padding-left: 10px;
     font-weight: bold;
     font-size: 18px;
     color: #d60f5c;
    }
    p {
     line-height: 30px; // 行间距
    letter-spacing: 7px; // 文字间距
     color: #ee1166;
    }
   }

赏

我家有矿，切勿打赏