CSS款式 处理文本太长显示信息省略号难题

日期:2020-10-14 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1、CSS款式 处理文本太长显示信息省略号难题

1、1般款式

  1般 css 款式,当宽度不足时,将会会出現换行的实际效果。这样的实际效果在一些情况下毫无疑问是不好的,能够改动 css 款式来处理这个难题。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
        <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 自融入宽度
                    </div>
                    <div slot="right" class="demo-split-pane">
                        未应用 ellipsis 自融入宽度
                    </div>
                </Split>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    split: 0.4
                }
            }
        })
    </script>
</html>

左边宽度缩小,文本换行。

右边宽度缩小,文本换行。

 

2、文本太长显示信息省略号或显示信息截取的实际效果

 

【一般写法:】

<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:  (可选)能够写固定不动值,还可以依据宽度自融入显示信息实际效果。

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
        <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">
            <h2>text-overflow : clip </h2>
            <div class="test_demo_clip">
                无法显示省略标识,而是简易的裁剪条
            </div>
            <br>

            <h2>text-overflow : ellipsis </h2>
            <div class="test_demo_ellipsis">
                当目标内文字外溢时显示信息省略标识
            </div>
            <br>

            <h2>自定宽度,依据宽度自融入尺寸</h2>
            <div class="demo-split">
                <Split v-model="split">
                    <div slot="left" class="demo-split-pane">
                        <div class="test_demo_defined_Width_clip">
                            应用 clip 自融入宽度
                        </div>
                    </div>
                    <div slot="right" class="demo-split-pane">
                        <div class="test_demo_defined_Width_ellipsis">
                            应用 ellipsis 自融入宽度
                        </div>
                    </div>
                </Split>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    split: 0.4
                }
            }
        })
    </script>
</html>

clip 显示信息剪裁的实际效果,ellipsis 显示信息省略号的实际效果。

总结

以上所述是网编给大伙儿详细介绍的CSS款式 处理文本太长显示信息省略号难题,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!