BinaryDevelop
  1. ホーム
  2. html

[解決済み] 改行する場所を指定する

2022-07-22 01:40:03

質問

HTMLテーブルのセルに表示したいテキストがあるとします。 

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

で、カンマの一つ後で優先的に改行されるようにしたい。

HTML レンダラに、指定された場所で改行し、空白の 1 つの後で改行する前にそれを最初に行うように指示する方法はありますか。 がなければ を使用せずに、空白の 1 つの後に改行しようとする前に、最初にそれを行うように HTML レンダラーに指示する方法はありますか? 半角スペースがあると、無条件に幅が大きくなってしまいます。I 欲しい の後、改行アルゴリズムが最初にカンマで試して行を適合させることができない場合、改行がスペースの 1 つで起こるようにしたいのです。

でテキストの断片をラップしてみました。 <span> 要素で囲んでみましたが、これは何の役にも立たないようです。 

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

note: 見た目は CSS3 text-wrap: avoid の動作は私が望むものですが、私はそれを動作させることができないようです。

どのように解決するのですか？

を使用することで 

span.avoidwrap { display:inline-block; }

で、まとめておきたいテキストを包む。 

<span class="avoidwrap"> Text </span>

は、まず優先的なブロックでラップし、その後必要に応じてより小さなフラグメントでラップします。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します