Home>Article>Web Front-end> 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.
Currently, many apps use webview, but... webview still has many pitfalls, especially the compatibility issues between Android and ios. Among them is the problem oftext-align.
In fact, the problem oftext-align: justifynot taking effect also exists on the web.text-align: justifywill not take effect when the copy has only one line. of.
The first solution is to usetext-align-last: justifyto fixtext-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
这是想要两端对齐的文字
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!