css text-align：内联块元素的对齐技术

Posted 2021-05-13

https://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly/11619432#11619432

Explanation

The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.

Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.

Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.

UPDATE for minified text (no spaces) issue

Kubi's comment noted that a minification of the html that removes the spaces between the "a" elements causes the justification to fail. A pseudo-space within the "a" tag does not help (but that is expected, as the space is happening inside the inline-block elmeent), a <wbr> added between the "a" tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character &nbsp;--other space characters like thin space and en space did not work (surprisingly).

Possible Future Clean Solution

A solution in which webkit is behind the times (as of writing this) is:

<pre>
.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet */
    text-align-last: justify; /* IE */
}
</pre>

Which works in FF 12.0+ and IE8+ (buggy in IE7). Because it is not supported by webkit yet, it is really only a partial solution. However, I thought I should post it as it can be useful for some.

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}