ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでTDオーバーフロー非表示を設定する方法

CSSでTDオーバーフロー非表示を設定する方法

醉折花枝作酒筹オリジナル: 2021-04-21 18:06:074239ブラウズ

方法: 最初に「word-break:keep-all」ステートメントを使用して行の折り返しを設定しません。次に、「overflow:hidden」ステートメントを使用して非表示部分を設定し、最後に「text-overflow:」を使用します。 ellipsis" ステートメントを使用して、オーバーフロー表示の省略記号を設定します。

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

td オーバーフローの非表示

table{
        width:100px;
        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }
    td{
        width:100%;
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
    }

すべてのコード:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>document</title> 
<style>
table{
        width:100px;
        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }
    td{
        width:100%;
        word-break:keep-all;/* 或是 white-space:nowrap;不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
    }
</style>
</head> 
<body>
    <table border="1">
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
    </table>
</body> 
</html>

エフェクトのスクリーンショット:

CSSでTDオーバーフロー非表示を設定する方法

推奨される学習: CSS ビデオチュートリアル

以上がCSSでTDオーバーフロー非表示を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 break overflow td word

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSでズームを設定する方法次の記事：CSSでズームを設定する方法

続きを見る