완벽하고 완벽하게 호환되며 양쪽 끝의 텍스트 정렬 해결, 중국어 이름 정렬 정렬-HTML 튜토리얼-php.cn

text-align:justify; 모든 브라우저에서 지원하지만 text-justify 등은 IE에서만 지원되므로 고려하지 마세요.

요소 내부의 하위 요소가 양쪽 끝에 정렬되도록 이해해 주세요. 물론 하위 요소는 인라인 또는 인라인 블록일 수 있습니다. 그러나 정당화는 마지막 줄에서 무력합니다. 이름을 정렬할 때 한 줄만 있기 때문에 마지막 줄로 간주되어 양쪽 끝에 정렬 효과가 없습니다.

4자리 이름이 정렬될 수 있도록 일반적으로 (한자 공백 1개) 및 (한자 공백 1개)를 사용하여 2자 또는 3자 이름을 추가합니다. 예:

어우양다파

장샤오산

王五

그런데 대부분의 브라우저는 정상인 것으로 확인되었으나 안타깝게도 대부분의 모바일 브라우저에서는 열리지 않고 아래와 같이 효과가 고르지 못한 것으로 확인되었습니다.

어우양다파

장샤오산

왕우

그래서 text-align:justify;를 사용하려고 생각했는데 한 줄을 양쪽 끝에서 정렬할 수 없는 문제를 어떻게 해결할 수 있을까요?

　브라우저가 이것이 마지막 줄이 아니라고 생각하도록 놔두세요

요소로 래핑될 빈 하위 요소를 추가합니다. 예:

<span style="color: #0000ff;"><</span><span style="color: #800000;">i </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="display:inline-block;width:100%;height:0;"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span>

로그인 후 복사

예: html 구조

                <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="arter"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>作品名称<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  宝贝儿<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>作品类型<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  油画<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>艺术家<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  张玉瀛<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>风格<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  超现实<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>材质<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  布面油画<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>题材<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  人物<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>创作时间<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  2011<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>所在位置<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  华东<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>尺寸<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>：  78x78cm<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

로그인 후 복사

scss

<span style="color: #800000;">　　　　　　　　　li</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#4a4a4a</span>;<span style="color: #ff0000;">
                    span{height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">65px</span>;<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">justify</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">top</span>;<span style="color: #ff0000;">
                         i{display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
                    }
                }</span>

로그인 후 복사

효과