ホーム>source

以下の例があります:

ウィズウィズ
ウィズウィズ

https://jsfiddle.net/ngoctuan001/cgLvh62o/2/

ご覧のとおり、 .wrapper { text-align: center; border: 1px solid red; background-color: white; color: black; width: 240px; height: 200px; font-size: 36px; line-height: 43px; } 内のテキストをテキスト配置します鬼ごっこ。テキスト領域の幅が固定されているため、スペースがある場合は次の行に改行しようとします。しかし、それが起こると、その行はスペースのために人間の目にはわずかに中心にありません。

上のスクリーンショットでわかるように、右側の赤い線は常に左側の赤い線よりもわずかに長くなっています。これは、コンピューターがスペース(強調表示)をもう1文字として扱うためです。しかし、人間の目では、これは中央揃えとは見なされません

これを修正する方法はありますか? ありがとう

<textarea class="wrapper" autosize>THE GREAT BANGKOK SALE</textarea>
あなたの答え
  • 解決した方法 # 1

    ウィズウィズ

    代替:

    Unfortunately there is no concrete CSS solution at the time of writing to achieve the desired result

    を使用する

    ウィズウィズ
    
    ウィズウィズ
    

  • 解決した方法 # 2

    あなたのテキストをpタグに入れてみてください

    <前>ウィズウィズ

  • 解決した方法 # 3

    1つの解決策は、divでcontentEditable = "true"を使用することです。

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

    <前>ウィズウィズ

    これにより、コンテンツが正しく中央に配置され、編集することもできます。

    コンテンツを取得するには:

    <前>ウィズウィズ contenteditable

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ GroupByの後のJavaソート