CSS:兩端對齊原理(text-align:justify)

時間 2019-11-09

標籤 css 兩端對齊原理 text align justify 欄目 CSS 简体版

原文原文鏈接

我是一個小白
我是一個小白
我是一個小白
噴我吧,哈哈css

寫樣式的是時候常常會碰到字體兩端對齊的效果,通常就網上找端css樣式複製下就結束了,沒有考慮過原理是啥
貼下代碼字體

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            display: inline-block;
            width: 300px;
            text-align: justify;
        }
        
        p:after {
            display: inline-block;
            content: '';
            width: 100%;
        }
    </style>
</head>

<body>
        <p>噴我吧</p>
</body>

我就納悶爲啥要在p標籤後面加一個僞元素是爲了什麼?可是刪除僞元素以後發現text-align:justify就不起做用了
問了別人才知道,text-align:justify只適用於多行文字,而最後一行是不起做用的,
如圖

因此,若是要讓單行兩端對齊的話,必需要這行文字不顯示在最後一行上,須要在兩端的對齊的標籤上添加了一個僞元素(塊級元素,或者行內塊元素,只要有寬度就行),寬度100%令這個僞元素自動換行至最後一行,這樣你所須要的"兩端對齊"就能顯示在字體上了。
spa

除了僞元素,你也能加個行內塊元素img input啥的，也能達到效果，可是建議仍是用僞元素比較好吧code

<p>
        噴我吧噴
        <img src="" width="100%" height="0"/>
    </p>

這麼傻的問題，也是問的別人才明白的，別人說這個是奇巧淫技。我查了下奇巧淫技是什麼意思，嘎嘎。我問寫個文章會不會被封，他說應該不會，只會被別人揍，哈哈blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。