一、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. MacOS安装Docker傻瓜式教程

    最近电脑越来越卡了,为了减少系统开销,以及后期维护方便,所以考虑将本地安装一些服务迁移到docker中去管理,这一切的基础是要先有docker服务,所以本文就先记录怎样在mac上安装配置docker, ...

  2. Glibc编译报错：*** These critical programs are missing or too old: as ld gcc

    Binutils版本升级 这里是binutils版本过低导致, 查看已部署版本 上传离线升级包 [root@sdw1 glibc]# tar -zxvf binutils-2.32.tar.gz [r ...

  3. wake on lan定时开机部署

    在Linux下通过Wake On LAN实现网络唤醒远程开机 我们经常有这样的场景或需求,人在外面,需要将家里的机器或公司的机器开启,进行远程控制操作. 有几种方式可以实现远程开机,一是通过主板的来电 ...

  4. Java的证书：HTTPS与SSL

    在取得connection的时候和正常浏览器访问一样,仍然会验证服务端的证书是否被信任(权威机构发行或者被权威机构签名):如果服务端证书不被信任,则默认的实现就会有问题,一般来说,java在访问ssl ...

  5. easyui textbox 赋值

    $('#fireInfo').textbox('setValue', tempData.fireInfo); $('#fireStartTime').datetimebox('setValue', t ...

  6. Floyd && Dijkstra +邻接表 +链式前向星（真题讲解来源：城市路）

    1381:城市路(Dijkstra) 时间限制: 1000 ms         内存限制: 65536 KB提交数: 4066     通过数: 1163 [题目描述] 罗老师被邀请参加一个舞会,是 ...

  7. Python实现简单框架及三大框架对比

    手撸web框架 简单的请求响应实现 要实现最简单的web框架,首先要对网络熟悉,首先HTTP协议是应用层的协议,只要我们给数据加上HTTP格式的响应报头,我们的数据就能基于socket进行实现了 im ...

  8. MySQL必知必会(创建计算字段(field))

    #字段(field)基本上和列(column)的意思相同 SELECT Concat(vend_name, ' (', vend_country, ')') FROM vendors ORDER BY ...

  9. MFC unicode字符集与多字节字符集 问题之彻底终结！

    Unicode 和多字节字符集 (MBCS) 支持 Visual Studio .NET 2003   有些国际市场以大字符集来使用日文和中文等语言.为了支持这些市场的编程,Microsoft 基础类 ...

  10. Xshell连接阿里云服务器

    1.遇到的问题 ​ 直接用阿里云的终端,还需要登录浏览器很是麻烦,所以用Xshell,ssh远程登录这样就轻松方便了很多. 2.打开 ​ 打开安装好的Xshell,点击新建 出现了这个界面,首先注意主 ...