一、CSS样式 解决文字过长显示省略号问题

1、一般样式

　　一般 css 样式，当宽度不够时，可能会出现换行的效果。这样的效果在某些时候肯定是不行的，可以修改 css 样式来解决这个问题。

<!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 自适应宽度

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

            <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样式 解决文字过长显示省略号问题的更多相关文章

  1. css 样式控制文本过长实现省略号

    css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...

  2. css实现文字过长显示省略号的方法

    <div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...

  3. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  4. css+div解决文字溢出控制显示字数

    一.一般的文字截断(适用于内联与块):  Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...

  5. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  6. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  7. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  8. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  9. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

随机推荐

  1. 图解 Spring：HTTP 请求的处理流程与机制【4】

    4. HTTP 请求在 Spring 框架中的处理流程 在穿越了 Web 容器和 Web 应用之后,HTTP 请求将被投送到 Spring 框架,我们继续剖析后续流程.Web 应用与 Spring M ...

  2. linux目录相关操作

    mkdir:新建目录 mkdir [-mp] 目录名称 -m:配置文件权限,直接设置,不需要看默认权限(umask) -p:递归创建目录 rmdir:删除空目录 rmdir [-p] 目录名称 -p: ...

  3. Java中父类和子类代码执行顺序

    执行顺序:父类静态块-->子类静态块-->父类非静态块-->父类构造方法-->子类非静态块-->子类构造方法 当父类或子类中有多个静态方法时按在代码中的顺序执行 pack ...

  4. Ansible 介绍和安装

    目录 Ansible 介绍 环境准备 Ansible安装 配置秘钥管理 配置Inventory文件 简单测试连通性 Ansible 介绍 运维工具分类: agent: puppet, func 这类都 ...

  5. 【合集】python 的一些妙用，推导式、三元表达式、with as 等

    自己常用的内置函数 函数如下: dir len str list tuple zip map reduce(现在并入了functools中) 常用的进制转换 Oct hex bin lambda 表达 ...

  6. Idea工具Debug快捷键

    F9 resume programe 恢复程序 Alt+F10 show execution point 显示执行断点 F8 Step Over 相当于eclipse的f6 跳到下一步 F7 Step ...

  7. python数据处理----常用数据文件的处理

    数据处理时,常用数据存储形式主要有:CSV.JSON.XML.EXCEL.数据库存储. 一.CSV文件 csv文件简介 CSV是一种通用的.相对简单的文件格式,被用户.商业和科学广泛应用.最广泛的应用 ...

  8. Linux下搭建及配置禅道服务器详细过程-包含软件资源

    **1:百度云盘下载: ** 禅道--链接: https://pan.baidu.com/s/1Stu7nOZVIPO5TnpJWjWtiQ 提取码:dnik CentOs操作系统--链接: http ...

  9. Kubernetes v1.17 版本解读 | 云原生生态周报 Vol. 31

    作者 | 徐迪.李传云.黄珂.汪萌海.张晓宇.何淋波 .陈有坤.李鹏审核 | 陈俊 上游重要进展 1. Kubernetes v1.17 版本发布 功能稳定性是第一要务.v1.17 包含 22 个增强 ...

  10. git配置文件—— .gitattributes

    目录 .gitattributes 文档 1. gitattributes文件以行为单位设置一个路径下所有文件的属性,格式如下: 2. 在gitattributes文件的一行中,一个属性(以text属 ...