What to do if text-align in css doesn't work

The reason why "text-align:justify" does not take effect is that the text is on the last line, so you can add a label before and after the text that you want to align at both ends, and then squeeze the text into a position that is not the last line. .

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Problem description

Currently, many apps use webview, but... webview still has many pitfalls, especially the compatibility issues between Android and ios. Among them is the problem of text-align.

In fact, the problem of text-align: justify not taking effect also exists on the web. text-align: justify will not take effect when the copy has only one line. of.

Solution

The first solution is to use text-align-last: justify to fix text-align: justifynot working on the last line Questions that work.

But..., the compatibility is poisonous. Check compatibility

Android still has a certain degree of support, but ios is miserable and is not supported at all, so it can only be changed.

Analysistext-align: justifyThe reason why it doesn't work is that the text is on the last line, so you can add a label before and after the text that you want to align at both ends, and then squeeze the text between on the last line.

html is as follows

<div class="wrapper">
    <span class="content"><i></i>这是想要两端对齐的文字<i></i></span>
    <!--这里设置两个i标签是因为前后都有，把文字挤回原来的位置-->
</div>

css is as follows

.content {
    width: 100px;/*要有固定宽度，不然没法两端对齐*/
    text-align: justify;/*设置两端对齐属性*/
}
i {
    display: inline-block;/*行内元素*/
    width: 100%;/*可以挤掉文字，保证不跟文字在同一行*/
    height: 0;
    visibility: hidden;
}

The same principle as above can be achieved using pseudo classes

.content {
    width: 100px;/*要有固定宽度，不然没法两端对齐*/
    text-align: justify;/*设置两端对齐属性*/
}
.content:before, .content:after {
    display: inline-block;/*行内元素*/
    content: '';
    width: 100%;/*可以挤掉文字，保证不跟文字在同一行*/
    height: 0;
    visibility: hidden;
}

Recommended learning: css Video tutorial

The above is the detailed content of What to do if text-align in css doesn't work. For more information, please follow other related articles on the PHP Chinese website!