用定义列表定义一段文字justify

短命女 2022-07-13 05:51 117阅读 0赞

实现以下效果：

1、这是一大段文字这是一大段文字这是一。  
2、这是一大段文字这是一大段文字这是一

大段文字这是一大段文字这是一大段文

字这是一大段文字这是一大段文字这是  
     一大段文字这是一  
3、一大段文字这是一大段文字这是一大段

文字这是一大段文字这是一大段文字这

是一大段文字这是一大段文字这是一大

段文字这是一大段文字这是一大段文字

这是一大段文字这是一大段文字这是一

大段文字  
4、文字这是一大段文字这是一大段文字这

是一大段文字这是一大段文字这是一大

段文字这是一大段文字这是一大段文字

这是一大段文字这是一大段文字这是一

大段文字这是一大段文字这是一大段文

字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字

html代码如下：

<!DOCTYPE html>
    <html lang="en-us">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      </head>
      <body>
        <div class="Container">
          <div class="ActiveRules">
            <dl><span></span>
              <dt><span>1、</span></dt>
              <dd> 这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字这是一大段文字这是一大段文字
    </dd>
            </dl>
            <dl><span></span>
              <dt><span>2、</span></dt>
              <dd> 这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是 一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是 一大段文字这是一大段文字这是一大段文字这是一大段文字</dd> </dl> </div> </div> </body></html>
     
     
     
    less代码如下：
     
     
     .ActiveRules{
    		font-size:30px;
    		color:#666;
    		text-align:left;
    		line-height:66px;
    		padding-left:25px;
    		padding-right:25px;
    		dt{
    			position:absolute;
    		}
    		dd{
    			text-align: justify;
    			padding-left:50px;
    			
    		}
       }