Was tun, wenn die Textausrichtung in CSS nicht funktioniert?

Der Grund, warum „text-align:justify“ nicht funktioniert, ist, dass sich der Text in der letzten Zeile befindet. Sie können also vor und nach dem Text, den Sie an beiden Enden ausrichten möchten, eine Beschriftung hinzufügen und dann den Text zusammendrücken in eine Position, die nicht die letzte Zeile ist.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Problembeschreibung

Derzeit verwenden viele Apps Webview, aber... Webview birgt immer noch viele Fallstricke, insbesondere die Kompatibilitätsprobleme zwischen Android und iOS. Dazu gehört das Problem von text-align. text-align的问题。

其实text-align: justify不生效的问题在web上面也存在，text-align: justify在当文案只有一行的时候是不会生效的。

解决方案

首先的解决方案是用text-align-last: justify来修复text-align: justify对最后一行不起作用的问题。

但是…，兼容性毒。查看兼容性

Android还是有一定的支持度的，但是ios就惨了，完全不支持，所以只能改。

分析text-align: justify

Tatsächlich besteht das Problem, dass text-align: justify nicht wirksam wird, auch im Web, wenn text-align: justify nur dann wirksam wird eine Zeile.

Lösung

Die erste Lösung besteht darin, text-align-last: justify zu verwenden, um das Problem text-align: justify am Ende zu beheben Problem mit einer Leitung, die nicht funktioniert.

Aber..., Verträglichkeit ist giftig. Überprüfen Sie die Kompatibilität

Android hat immer noch einen gewissen Grad an Unterstützung, aber iOS ist miserabel und wird überhaupt nicht unterstützt, daher können wir es nur ändern. Analyse Der Grund, warum text-align: justify nicht funktioniert, ist, dass sich der Text in der letzten Zeile befindet, sodass Sie vor und nach dem Text, den Sie an beiden Enden ausrichten möchten, eine Beschriftung hinzufügen können , und quetschen Sie den Text dann an eine andere Stelle als die letzte Zeilenposition.

🎜html lautet wie folgt🎜

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

🎜css lautet wie folgt🎜

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

🎜Das gleiche Prinzip wie oben kann mithilfe von Pseudoklassen implementiert werden🎜

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

🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonWas tun, wenn die Textausrichtung in CSS nicht funktioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!