CSSテーブルのセルが折り返されないようにする方法

CSS テーブルのセルが折り返されていないことを確認する方法: 1. 対応する HTML ファイルを開きます; 2. テーブル table と td タグの内容を表示します; 3. css 属性を「white」に設定します" テーブル table と td タグの -space:nowrap;" により、テーブル内のテキストが折り返されなくなります。

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

CSS でセルを禁止する方法テーブルはラッピングから？

css テーブル テキストの非行折り返し設定:

プロジェクト開発中に、セルの内容が多すぎるために発生する行折り返しの問題に何度も遭遇します。テーブルが非常に見苦しくなります。 cssを使って表内の文字を折り返さないように設定する方法を見てみましょう。

CSS では、table タグと td タグにwhite-space:nowrap; スタイルを設定することで、テーブル内のテキストが折り返されるのを防ぐことができます。

コードは次のとおりです。

/*让单元格内容过多时也不换行*/
#datasTablediv table td{
white-space: nowrap;
}

white-space 属性は、要素内の空白を処理する方法を設定します。

この属性は、レイアウト プロセス中に要素内の空白文字を処理する方法を宣言します。 pre-wrap と pre-line の値は CSS 2.1 で新しく追加されました。

属性値:

normal デフォルト。空白はブラウザによって無視されます。

pre 空白はブラウザによって保持されます。これは、HTML の

 タグのように動作します。 </p><p>nowrap テキストは折り返されません。テキストは、<br> タグが見つかるまで同じ行に続きます。 </p><p>pre-wrap 空白シーケンスを保持しますが、通常どおりラップします。 </p><p>pre-line は空白シーケンスをマージしますが、改行は保持します。 </p><p>inherit は、空白属性の値を親要素から継承することを指定します。 </p><p>例:</p><p>css コード:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table {
    border : 1px solid red;
}
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}

ログイン後にコピー

html コード:

<table>
    <tr><td>此处文本超过设定的宽度</td></tr>
</table>

推奨学習:「css ビデオ チュートリアル 」

以上がCSSテーブルのセルが折り返されないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。