css text-align-last设置末尾文本对齐方式-CSDN博客

本文链接：https://blog.csdn.net/weixin_45048106/article/details/96342289

text-align-last：auto | start | end | left | right | center | justify

auto：无特殊对齐方式。
left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐。
start：内容对齐开始边界。
end：内容对齐结束边界。

说明：

设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式

如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行，除非显示的指定 text-align 第一行对齐方式（值 ‘start end’），否则 text-align-last 将会覆盖 text-align；
如果 auto 值被指定，内容的对齐方式将依据 text-align 的设定，除非 text-align 设置为justify；

作为IE的私有属性之一，IE5.5率先实现了 text-align-last ，后期被w3c采纳成标准属性；
IE7及以下浏览器只实现了块内最后一行的对齐方式，没有处理被强制打断的行的对齐方式，从IE8开始，这两种形式的行对齐都被支持；
IE浏览器下，如果 text-align-last 要生效，必须先定义 text-align 为justify；

用法上的实践尝试

在这里插入图片描述

<style>
        body{  background: #fff;  }
        form{  width:320px;  height: 180px;  margin: 100px auto;  
        border: 1px solid #008c8c;
           padding:30px 20px;   border-radius: 10px;
            text-align: center;        
            position: relative;   }
        form::before{
            content: "表单";
            display: block;
            position: absolute;
            top: -12px;     left: 20px;
            width: 40px;    height: 32px;
            background: #fff;       }
        .wrapper{     
            text-align-last: justify;
            /* text-align: justify; */        }
        label{  display: block;   margin:10px auto;  }            
     
         .wrapper2{
             /* border: 1px solid blue; */
             width: 5em;     display: inline-block;
             text-align-last: justify;           
         }
         .wrapper2 label{    margin: 10px auto;  }
         .inputWrapper{     /* border: 1px solid red; */
             display: inline-block;
             width: 200px;   }
         .inputWrapper input{  margin:5px auto; }
    </style>

<body>
    <form class="form1" action="">
            <div class="wrapper"> <label for="">姓名： <input type="user" title="请输入4-10 个字符" placeholder="请输入4-10个字符"> </label>
        <label for="">密码： <input type="password" title="请输入6-30个字符" placeholder="请输入6-30个字符"></label>
        <label for="">确认密码： <input type="password" title="请再输入一遍密码" placeholder="请再输入一遍密码"></label>
        <label for="">验证码：  <input type="text" title="请输入验证码" placeholder="输入验证码" ></label>   </div>
                   
        <button type="submit">提交</button>
    </form>

    <form action="" class="form2">
            <div class="wrapper2"> <label for="">姓名</label>
        <label for="">密码</label> 
        <label for="">确认密码</label>
        <label for="">验证码</label> </div>
       <div class="inputWrapper"> <input type="user" title="请输入4-10 个字符" placeholder="请输入4-10个字符"> 
        <input type="password" title="请输入6-30个字符" placeholder="请输入6-30个字符">  
        <input type="password" title="请再输入一遍密码" placeholder="请再输入一遍密码">
        <input type="text" title="请输入验证码" placeholder="输入验证码" > </div> 
        <button type="submit">提交</button>
    </form>
</body>

在这里插入图片描述

定宽情况下，设置 text-align-last:justify;

 <style>
        body{background: #fff; }
        form{ width:320px;  height: 180px;
            margin: 100px auto;
           border: 1px solid #008c8c;
           padding:30px 20px;
           border-radius: 10px;
            text-align: center;          
            position: relative; }
        form::before{
            content: "表单";
            display: block;
            position: absolute;
            top: -12px; left: 20px;
            width: 40px; height: 32px;
            background: #fff; }
      
        label{
          display:inline-block;
       margin:10px auto;
       width: 5em;
        text-align-last: justify;
        }     
        input{ margin-left: 10px;}             
    </style>

 <form class="form1" action="">
         <div class="wrapper"> <label for="">姓名</label>： <input type="user" title="请输入4-10 个字符" placeholder="请输入4-10个字符"> 
     <label for="">密码</label>： <input type="password" title="请输入6-30个字符" placeholder="请输入6-30个字符">
     <label for="">确认密码</label>： <input type="password" title="请再输入一遍密码" placeholder="请再输入一遍密码">
     <label for="">验证码</label> ： <input type="text" title="请输入验证码" placeholder="输入验证码" >   </div>                   
     <button type="submit">提交</button>
 </form>

white-space: pre;用它来调整空格也可以，字数是奇数时，动态的变化字数时，显得很麻烦，空格要手动调整多少来达到对齐。

用一段文字试一下

  
        <div class="testTxt">我是第一行，后面紧接着强制换行<br />一些随的文字内容一些的文字内容一些的文字内容一些的文字内容一些的文字内容一些的文字内容我后面紧跟着强制换行<br />一些随意的文字内容一些随意的文字内容一些随意的文字内容一些随意的文字内容一些随意的文字内容我是最后一行</div>
        <div class="testTxt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, aperiam!</div>
        <div class="testTxt">Lorem ipsum dolor sit amet.</div>
        <div class="testTxt">原来生活也不全是欺骗和冷漠，依旧可以期待美好的事情发生，期待好运的来临，但人的一生永远不可能一帆风顺，艰难，才是生活的常态。

            我们能做的就是不断向前走，把自己变得更强大。</div>

  .testTxt{width:300px;margin:10px;background:#008c8c;
   text-align:justify;
   -moz-text-align-last:center;
   text-align-last:center;}

在这里插入图片描述
text-align-last:justify;的情形

 .testTxt{width:300px;margin:10px;background:#008c8c;
      text-align:justify;
      -moz-text-align-last:justify;
      text-align-last:justify;}

在这里插入图片描述
text-align-last:justify它通常用来完成后端文字对齐的样式需要。