css小技巧 - 換行對齊

假如需要你實現換行對齊，你可能會想到ul標簽和li標簽自帶這種功能

 

 確實在使用li標簽自帶的項目符號的時候可以直接使用，但是有時可能會有不一致時

就需要我們動手寫兩行代碼來實現一下，比如這種效果：

 

 項目符號是數字和頓號，如果我們直接復制粘貼這四行文字則會得到如下結果

 

 文字換行后是不和項目符號對齊的，因此需要加入底下這兩行代碼：

// (百度百科) em單位名稱為相對長度單位。相對於當前對象內文本的字體尺寸。

margin-left: 1.5em; // 距離根據你實際需求調整就行
text-indent: -1.5em; // 但是單位需要用em

 

以下是示例代碼：

<!-- HTML -->

<div class="text-overflow">
    <p class="text-item">1、這是一段文字一段文字一段文字</p>
    <p class="text-item">2、這是一段文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
    <p class="text-item">3、這是一段文字一段文字一段文字</p>
    <p class="text-item">4、這是一段文字一段文字一段文字</p>
</div>


<div class="ul-text-wrap">
    <ul class="ul-text">
        <li>這是一段文字一段文字一段文字</li>
        <li>這是一段文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</li>
        <li>這是一段文字一段文字一段文字</li>
        <li>這是一段文字一段文字一段文字</li>
    </ul>
</div>

 

// CSS

.text-overflow {
    padding: 24px 12px;
    width: 500px;
    background-color: #f2f2f2;
    box-sizing: border-box;
}

.text-item {
    margin-left: 1.5em;
    text-indent: -1.5em;
}

.ul-text-wrap {
    padding: 24px 12px;
    width: 500px;
    background-color: #f2f2f2;
    box-sizing: border-box;
}

.ul-text li {
    margin: 16px 0;
}