ダッシュを含む表のセルが HTML/CSS で折り返されないようにするにはどうすればよいですか?

Question

<p>私の質問が次の質問と非常によく似ていることはわかっています: 表のセルでのテキストの折り返しを防ぐ方法。これが私が最初にチェックした質問でした。 </p> <p>表があり、列の 1 つに長い説明を書き、次の列は日付です。日付列はダッシュで区切られた文字列であるため、ブラウザーは日付列をラップすることがクールだと考えます。現在、私は次のようなものを持っています: </p> <pre class="brush:php;toolbar:false;">| 説明 | 日付 | |----------------------------|----------| | とても長いです | 2022-10- | | 多くの説明セル | 12 | | 行... | | <p>説明セルを少し短くし、日付列を折り返さないようにブラウザに伝えるにはどうすればよいですか。私が読んだ解決策では、<code><td Wrap="nowrap"></code>を使用する必要があると書かれていましたが、これはスペースには機能しますが、ダッシュには機能しません。 </p> <p>非収縮フレックス要素を使用する必要がありますか? </p>

---

<p>説明を短くするということは、次のことを意味します: </p> <pre class="brush:php;toolbar:false;">| 説明 | 日付 | |-------------------------------------|---------------------| | とても長いです | 2022-10-12 | | | を含む説明セル | 多くの行... | |</pre></p>

Answer 1

日付列には white-space:nowrap; を使用する必要があります。説明セルを短くしたいと言っている意味がわかりません。幅を調整するだけで希望の結果が得られます。

Answer 2

CSS に white-space:nowrap を追加するだけで、すべてが 1 行に表示されます。以下を参照してください

リーリー リーリー