CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. 一般的なスタイル

一般的に、CSS スタイルでは、幅が十分でない場合に改行効果が発生する可能性があります。この効果は場合によっては絶対に受け入れられないものですが、CSS スタイルを変更することでこの問題を解決できます。

<!DOCTYPE html>
<html>
    <ヘッド>
        <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
        <title>テキストオーバーフロー</title>
        <link rel="スタイルシート" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
        <スタイル タイプ="text/css">
            .demo-split {
                幅: 500ピクセル;
                高さ: 100px;
                境界線: 1px 実線 #dcdee2;
                背景：淡い緑;
            }

            .demo-split-pane {
                パディング: 10px;
                色: 赤;
            }
        </スタイル>
    </head>
    <本文>
        <div id="アプリ">
            <div class="demo-split">
                <v-model を分割="split">
                    <div スロット="左" クラス="デモ分割ペイン">
                        クリップ適応幅を使用していない</div>
                    <div スロット="右" クラス="デモ分割ペイン">
                        省略記号の適応幅を使用していない</div>
                </分割>
            </div>
        </div>
    </本文>
    <script type="text/javascript">
        新しいVue({
            el: '#app',
            データ（） {
                戻る {
                    分割: 0.4
                }
            }
        })
    </スクリプト>
</html>

左側の幅が狭くなり、テキストが折り返されます。

右側の幅が狭くなり、テキストが折り返されます。

2. テキストが長すぎるため省略記号または切り捨て効果が表示される

【通常表記】

<スタイル タイプ="text/css">
    .test_demo_clip {
        テキストオーバーフロー: クリップ;
        オーバーフロー: 非表示;
        空白: ラップなし;
        幅: 200ピクセル;
        背景：淡い緑;
    }

    .test_demo_ellipsis {
        テキストオーバーフロー: 省略記号;
        オーバーフロー: 非表示;
        空白: ラップなし;
        幅: 200ピクセル;
        背景：淡い緑;
    }
</スタイル>

【イラスト：】
    text-overflow: テキストがオーバーフローしたときに省略記号を表示するかどうかを示します。ellipsis は省略記号効果を示し、clip はクリッピング効果を示します。
    overflow:hidden; あふれたテキストを非表示にします。
    white-space:nowrap; はテキストの折り返しを禁止します。
    width: (オプション) 固定値を設定するか、幅に合わせて表示効果を設定できます。

<!DOCTYPE html>
<html>
    <ヘッド>
        <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
        <title>テキストオーバーフロー</title>
        <link rel="スタイルシート" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
        <スタイル タイプ="text/css">
            .test_demo_clip {
                テキストオーバーフロー: クリップ;
                オーバーフロー: 非表示;
                空白: ラップなし;
                幅: 200ピクセル;
                背景：淡い緑;
            }

            .test_demo_ellipsis {
                テキストオーバーフロー: 省略記号;
                オーバーフロー: 非表示;
                空白: ラップなし;
                幅: 200ピクセル;
                背景：淡い緑;
            }

            .test_demo_defined_Width_clip {
                テキストオーバーフロー: クリップ;
                オーバーフロー: 非表示;
                空白: ラップなし;
                背景：素焼き。
            }
            
            .test_demo_defined_Width_ellipsis {
                テキストオーバーフロー: 省略記号;
                オーバーフロー: 非表示;
                空白: ラップなし;
                背景：素焼き。
            }

            .demo-split {
                幅: 500ピクセル;
                高さ: 100px;
                境界線: 1px 実線 #dcdee2;
                背景：淡い緑;
            }

            .demo-split-pane {
                パディング: 10px;
            }
        </スタイル>
    </head>
    <本文>
        <div id="アプリ">
            <h2>テキストオーバーフロー: クリップ</h2>
            <div class="test_demo_clip">
                省略記号を表示せず、単にバーを切り取る</div>
            <br>

            <h2>テキストオーバーフロー: 省略記号</h2>
            <div class="test_demo_ellipsis">
                テキストがオブジェクトからはみ出すと省略記号が表示されます。
            <br>

            <h2>カスタム幅、幅に応じてサイズを調整</h2>
            <div class="demo-split">
                <v-model を分割="split">
                    <div スロット="左" クラス="デモ分割ペイン">
                        <div class="test_demo_defined_Width_clip">
                            クリップ適応幅を使用する</div>
                    </div>
                    <div スロット="右" クラス="デモ分割ペイン">
                        <div class="test_demo_defined_Width_ellipsis">
                            省略記号の適応幅を使用する</div>
                    </div>
                </分割>
            </div>
        </div>
    </本文>
    <script type="text/javascript">
        新しいVue({
            el: '#app',
            データ（） {
                戻る {
                    分割: 0.4
                }
            }
        })
    </スクリプト>
</html>

clip は切り抜きの効果を示し、ellipsis は省略記号の効果を示します。

要約する

上記は、テキストが長すぎる場合に省略記号が表示される問題を解決するために紹介した CSS スタイルです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: tdコンテンツは自動的にテーブルを折り返します。幅を設定すると、テキストが自動的に折り返されます。

>>: React の 10 個のフックの紹介