How to align text at both ends with css

This article introduces the effect of using CSS to align both ends of text. It has certain reference value. Interested friends can take a look.

How to align both ends of text with css

Speaking of text-align, everyone must be familiar with it. We often use it The keywords left, right, and center realize the left, right, and center alignment of inline elements relative to the parent element. Of course, we also use justify to align both ends of the text.

#As shown in the picture above, the two ends are aligned relative to the left alignment, which looks neat and orderly visually. But justify is not valid for the last line. Usually such typesetting is excellent for the entire text. We don’t want to align both ends when the last line only has two words. After all, it is not easy to read. So when we only have one line text, but how to solve the problem of aligning both ends of a single line of text (the form item effect as shown below)?

According to the fact that justify is invalid for the last line, we can add a new line so that the text of this line is not the last line. The implementation is as follows:

//html<div class="item">
    <span class="label" >{{item.label}}</span>：    <span class="value">{{item.value}}</span></div>

//scss
.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .value {
        padding-right: 10px;
    }
}

but the above writing method can be said to be more troublesome. Here comes the key point. I recently learned about a newly learned attribute text-align-last. This attribute defines the content of a paragraph of text. Alignment rules for the last line before being forced to wrap.

//scss
.item {
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .value {
        padding-right: 10px;
    }
}

Compared with the first implementation, the second implementation is much simpler. However, this attribute has compatibility issues. You can decide the implementation method according to the situation.

(Recommended learning: CSS tutorial)

The above is the detailed content of How to align text at both ends with css. For more information, please follow other related articles on the PHP Chinese website!