行折り返しなしでCSS TDテキストを実現する方法

css 行の折り返しなしで td テキストを実装する方法: まず、対応する css コードを開き、次にテーブルと td タグに「white-space:nowrap;」スタイルを設定して、テーブル内のテキストが折り返されないようにします。 。

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

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 TDテキストを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。