CSS implementiert die Anzeige von Ellipsen, wenn der Text zu lang ist-CSS-Tutorial-php.cn

CSS implementiert die Anzeige von Ellipsen, wenn der Text zu lang ist

angryTom

Freigeben： 2020-02-25 18:12:10

nach vorne

3193 Leute haben es durchsucht

Dieser Artikel stellt die CSS-Methode zum Anzeigen von Ellipsen vor, wenn der Text zu lang ist. Ich hoffe, dass er für Freunde, die CSS lernen, hilfreich sein wird.

CSS implementiert die Anzeige von Ellipsen, wenn der Text zu lang ist

1. Der CSS-Stil löst das Problem der Auslassungspunkte, wenn der Text zu lang ist.

Allgemeiner CSS-Stil. Wenn die Breite nicht ausreicht, kann es zu einem Zeilenumbruch kommen. Dieser Effekt wird irgendwann definitiv nicht mehr funktionieren. Sie können den CSS-Stil ändern, um dieses Problem zu lösen.

<!DOCTYPE html><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>text-overflow</title>
        <link rel="stylesheet" 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>
        <style type="text/css">
            .demo-split {
                width: 500px;
                height: 100px;
                border: 1px solid #dcdee2;
                background: palegreen;
            }

            .demo-split-pane {
                padding: 10px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="app">
            <p class="demo-split">
                <Split v-model="split">
                    <p slot="left" class="demo-split-pane">
                        未使用 clip 自适应宽度                    </p>
                    <p slot="right" class="demo-split-pane">
                        未使用 ellipsis 自适应宽度                    </p>
                </Split>
            </p>
        </p>
    </body>
    <script type="text/javascript">
        new Vue({
            el: &#39;#app&#39;,
            data() {                return {
                    split: 0.4
                }
            }
        })    </script></html>

Nach dem Login kopieren

Die Breite auf der linken Seite wird kleiner und der Text wird umbrochen.

(Empfohlenes Lernen:

CSS-Tutorial

)

Die Breite auf der rechten Seite wird kleiner und der Text wird umbrochen.

2. Wenn der Text zu lang ist, werden die Auslassungspunkte angezeigt oder der Abfangeffekt wird angezeigt.

【通常写法：】<style type="text/css">
    .test_demo_clip {
        text-overflow: clip;
        overflow: hidden;
        white-space: nowrap;
        width: 200px;
        background: palegreen;
    }

    .test_demo_ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 200px;
        background: palegreen;
    }</style>【说明：】
    text-overflow：表示当文本溢出时是否显示省略标记，ellipsis表示省略号效果，clip 表示截取的效果。
    overflow:hidden;  将文本溢出的内容隐藏。
    white-space:nowrap;  是禁止文字换行。
    width：  （可选）可以写固定值，也可以根据宽度自适应显示效果。

Nach dem Login kopieren

<!DOCTYPE html><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>text-overflow</title>
        <link rel="stylesheet" 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>
        <style type="text/css">
            .test_demo_clip {
                text-overflow: clip;
                overflow: hidden;
                white-space: nowrap;
                width: 200px;
                background: palegreen;
            }

            .test_demo_ellipsis {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 200px;
                background: palegreen;
            }

            .test_demo_defined_Width_clip {
                text-overflow: clip;
                overflow: hidden;
                white-space: nowrap;
                background: bisque;
            }
            
            .test_demo_defined_Width_ellipsis {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                background: bisque;
            }

            .demo-split {
                width: 500px;
                height: 100px;
                border: 1px solid #dcdee2;
                background: palegreen;
            }

            .demo-split-pane {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <p id="app">
            <h2>text-overflow : clip </h2>
            <p class="test_demo_clip">
                不显示省略标记，而是简单的裁切条            </p>
            <br>

            <h2>text-overflow : ellipsis </h2>
            <p class="test_demo_ellipsis">
                当对象内文本溢出时显示省略标记            </p>
            <br>

            <h2>自定义宽度，根据宽度自适应大小</h2>
            <p class="demo-split">
                <Split v-model="split">
                    <p slot="left" class="demo-split-pane">
                        <p class="test_demo_defined_Width_clip">
                            使用 clip 自适应宽度                        </p>
                    </p>
                    <p slot="right" class="demo-split-pane">
                        <p class="test_demo_defined_Width_ellipsis">
                            使用 ellipsis 自适应宽度                        </p>
                    </p>
                </Split>
            </p>
        </p>
    </body>
    <script type="text/javascript">
        new Vue({
            el: &#39;#app&#39;,
            data() {                return {
                    split: 0.4
                }
            }
        })    </script></html>

Nach dem Login kopieren

Der Clip zeigt den Effekt an des Zuschneidens und der Auslassungspunkte zeigen den Effekt der Auslassungspunkte an.

PHP chinesische Website, eine große Anzahl von

Programmier-Tutorials

, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonCSS implementiert die Anzeige von Ellipsen, wenn der Text zu lang ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!