溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題

發(fā)布時(shí)間：2023-01-05 10:32:24 來(lái)源：億速云 閱讀：168 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、一般樣式

　　一般 css 樣式，當(dāng)寬度不夠時(shí)，可能會(huì)出現(xiàn)換行的效果。這樣的效果在某些時(shí)候肯定是不行的，可以修改 css 樣式來(lái)解決這個(gè)問(wèn)題。

<!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>
        <div id="app">
            <div class="demo-split">
                <Split v-model="split">
                    <div slot="left" class="demo-split-pane">
                        未使用 clip 自適應(yīng)寬度
                    </div>
                    <div slot="right" class="demo-split-pane">
                        未使用 ellipsis 自適應(yīng)寬度
                    </div>
                </Split>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    split: 0.4
                }
            }
        })
    </script>
</html>

左側(cè)寬度變小，文字換行。

CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題

右側(cè)寬度變小，文字換行。

CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題

2、文字過(guò)長(zhǎng)顯示省略號(hào)或顯示截取的效果

【通常寫法：】

<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>

【說(shuō)明：】
    text-overflow：表示當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記，ellipsis表示省略號(hào)效果，clip 表示截取的效果。
    overflow:hidden;  將文本溢出的內(nèi)容隱藏。
    white-space:nowrap;  是禁止文字換行。
    width：  （可選）可以寫固定值，也可以根據(jù)寬度自適應(yīng)顯示效果。
<!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>
        <div id="app">
            <h3>text-overflow : clip </h3>
            <div class="test_demo_clip">
                不顯示省略標(biāo)記，而是簡(jiǎn)單的裁切條
            </div>
            <br>

            <h3>text-overflow : ellipsis </h3>
            <div class="test_demo_ellipsis">
                當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記
            </div>
            <br>

            <h3>自定義寬度，根據(jù)寬度自適應(yīng)大小</h3>
            <div class="demo-split">
                <Split v-model="split">
                    <div slot="left" class="demo-split-pane">
                        <div class="test_demo_defined_Width_clip">
                            使用 clip 自適應(yīng)寬度
                        </div>
                    </div>
                    <div slot="right" class="demo-split-pane">
                        <div class="test_demo_defined_Width_ellipsis">
                            使用 ellipsis 自適應(yīng)寬度
                        </div>
                    </div>
                </Split>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    split: 0.4
                }
            }
        })
    </script>
</html>

clip 顯示裁剪的效果，ellipsis 顯示省略號(hào)的效果。

CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題

CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題

CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

“CSS怎么解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手