一、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. 【2018寒假集训 Day2】【动态规划】钱币兑换（exchange）（自己翻译的2333）

    钱币兑换(exchange) 问题描述: Dave偶然获得了未来几天的美元(dollars)与马克(marks)之间的兑换率.例如Dave开始有100marks,请编写个程序帮助Dave找出最好的买卖 ...

  2. 【Android - IPC】之ContentProvider简介

    1.Content Provider简介 Content Provider是Android中提供的一种专门用于不同应用之间进行数据共享的方式,从这一点来看,它天生就适合IPC(Inter-Proces ...

  3. MySql计算字段的长度

    用户账号有用中文字符,查找所有含有中文字符的账号 SELECT member_name FROM table_member WHERE length(member_name)!=char_length ...

  4. 检测是否引入jQuery

    if (typeof jQuery != 'undefined') { document.write("jquery已经被加载"); } else { document.write ...

  5. 一文了解Nuget的使用

    Nuget介绍 官网定义:NuGet是.NET的软件包管理器(免费).NuGet客户端工具提供了生成和使用软件包的能力.NuGet Gallery 是所有软件包作者和消费者都使用的中央软件包存储库. ...

  6. 华为云北京四业务，访问北京一OBS桶，配置指南

    [摘要] 华为云跨数据中心,从北京四访问北京一的OBS桶里面的数据.免去数据迁移的麻烦 1      驱动力 跨region访问OBS桶里面的数据时.如果不走云连接,一个OBS桶域名对应的IP地址,是 ...

  7. syslog日志

    Syslog协议 系统日志(Syslog)协议是在一个IP网络中转发系统日志信息的标准,它是在美国加州大学伯克利软件分布研究中心(BSD)的TCP/IP系统实施中开发的,目前已成为工业标准协议,可用它 ...

  8. 学习go第一天-编写第一个go程序

    开发环境构建 GOPATH 在1.8版本前必须设置这个环境变量 1.8以及更高版本如果没有设置,则使用默认值在Mac上GOPATH可以通过修改 -/.bash_profile来设置 程序基本结构 pa ...

  9. nginx编译安装配置模块大全

    使用configure命令配置构建.它定义了系统的各个方面,包括允许nginx用于连接处理的方法.最后,它会创建一个Makefile.该configure命令支持以下参数:--help 打印帮助信息. ...

  10. 【新】Docker实战总结

    >>> 目录 <<< Docker简介 Docker优势 Docker基本概念 Docker安装使用 Docker常用命令 Docker镜像构建 Docker本地仓 ...