CSSのテキストを正当化する際の問題

Question

私はウェブサイト上でテキストを正当化しようとしていますが、正しい方法ではできません。

マイコード：

<ul> 
    <li style="text-align: justify;"> 
     ::before 
     <span style="font-size: 14pt;">Text text text text text Text text text text text Text text text text text</span> 
     <span style="font-size: 14pt;">taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span> 
    </li> 
</ul> 

CSSの一部：私はthextを希望

はverticaly（の赤い線でallignedする必要がありますように

#inbound-list.class-SyMhZJtiLv li { 
    color: #000000; 
    list-style: none; 
    font-weight: 500; 
    font-size: 16px; 
    vertical-align: top; 
    margin-bottom: 10px; 
} 

#inbound-list.class-SyMhZJtiLv li:before { 
    background: transparent; 
    border-radius: 50% 50% 50% 50%; 
    color: #000000; 
    display: inline-block; 
    font-family: 'FontAwesome'; 
    font-size: 18px; 
    line-height: 18px; 
    margin-right: 0.5em; 
    margin-top: 0; 
    text-align: center; 
} 

#inbound-list.fa-list-check li:before { 
    content: "\f00c"; 
} 

に見えます線はここで助けになると思います）。

これ以上行う方法はありません。多分あなたはいくつかのアイデアを持っていますか？

Answer 1

が、これは何が必要ですか？

li { 
 
    list-style: none; 
 
    font-size: 16px; 
 
    padding-left: 30px; 
 
    position: relative; 
 
    text-align: justify 
 
} 
 
li::before { 
 
    border-radius: 50%; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline-block; 
 
    content: "✓"; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 20px; 
 
}

<ul> 
 
    <li> 
 
    <span>Text text text text text Text text text text text Text text text text text</span> 
 
    <span>taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span> 
 
    <span>Text text text text text Text text text text text Text text text text text</span> 
 
    <span>taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span> 
 
    </li> 
 
</ul>

Answer 2

ジャスト要素の前に::にdisplay: block;を追加

li { 
    text-align: justify; 
    text-justify: inter-word; 
} 

または

#justify p:after { 
    content: ""; 
    display: inline-block; 
    width: 100%; 
} 

Answer 3

それを試してみてください。これにより、テキストは縦線を尊重します。

Answer 4

text-alignプロパティは、paddingは、余分なスペースに上部と下部の両方5pxを配置し、左右両方10pxしている間、あなたのテキストを表示する方法です。あなたのCSSの下部にこれを試してみてください。

ul li{ 
    padding: 5px 10px; 
} 

ul{ 
    text-align: justify; 
}