一、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. java多线程的wait、notify/notifyAll区别

    1.wait().notify/notifyAll() 方法是Object的本地final方法,无法被重写.   2.wait()使当前线程阻塞,前提是 必须先获得锁,一般配合synchronized ...

  2. WIN2003+IIS6环境SSL证书的安装

        下载LOFTER我的照片书  |     一.解压证书文件.证书文件解压后,找到后缀为.pfx的压缩包,进行解压到固定位置.(一般放在网站根目录)        

  3. jQuery上拉加载更多

    <header id="header">首 页</header> <section id="main"> <ul id ...

  4. 记录我的 python 学习历程-Day03 数据类型 str切片 for循环

    一.啥是数据类型 ​ 我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,"汉"是文字,否则它是分 ...

  5. vue使用tips

    1. native修饰符可以用来绑定原生事件 2. destroyed在列表重渲染时,销毁的列表项会调用. 3. 并不是所有的数据都适合放入vuex 4. 子组件mounted先于父组件发生. 5. ...

  6. 带着canvas去流浪系列之九 粒子动画

    [摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有 ...

  7. 使用python实现http服务器

    主要使用python实现了一个http服务器.http服务器实现了用户的注册和登录的简单功能,当然还可以继续扩展. 数据的存储使用的是文件,有兴趣的话可以使用数据库进行存储.当然根据个人兴趣而定. 本 ...

  8. 【实用工具】使用Java封装可执行exe应用全过程

    目录 编写java代码 打包 创建exe文件 压缩 总结 本文将使用exe4j将java项目封装为可以发送给他人使用的工具为例,来记录将java项目封装为exe文件的全过程 编写java代码 目标:创 ...

  9. 鲲鹏来了,在EulerOS试用.NETCore-3.1

    在EulerOS试用.NETCore-3.1 前言 EulerOS其实出来有一段时间了,一直在关注,单是仅仅也只是停留在观望的阶段,目前还没有接入的打算:正好看到园子里的兄弟分享了华为云免费试用的活动 ...

  10. leaflet 结合 geoserver 实现地图空间查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...