一、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. linux alias（命令别名）

    alias:获取定义的所有命令别名 alias NAME='COMMAND':定义别名 unalias NAME:撤销别名

  2. 【转】Pandas常见用法总结

    关键缩写和包导入 在这个速查手册中,我们使用如下缩写: df:任意的Pandas DataFrame对象 s:任意的Pandas Series对象 raw:行标签 col:列标签 引入响应模块: im ...

  3. EntityFramework Core 3多次Include导致查询性能低之解决方案

    前言 上述我们简单讲解了几个小问题,这节我们再来看看如标题EF Core中多次Include导致出现性能的问题,废话少说,直接开门见山. EntityFramework Core 3多次Include ...

  4. centos 6.x 系统基础优化简版

    Centos 6.x 系统基础优化 1.更换国内yum源 删除系统带的centos官方yum源 rm -rf /etc/yum.repos.d/* 使用国内阿里云源 curl -o /etc/yum. ...

  5. 原创001 | 搭上SpringBoot自动注入源码分析专车

    前言 如果这是你第二次看到师长的文章,说明你在觊觎我的美色!O(∩_∩)O哈哈~ 点赞+关注再看,养成习惯 没别的意思,就是需要你的窥屏^_^ 本系列为SpringBoot深度源码专车系列,第一篇发车 ...

  6. 错误 找不到Xcode No such file or directory

  7. pod install/update速度慢或失败的解决方案实践

    本文基于 https://www.cnblogs.com/dabaomo/p/9634727.html 声明 坚决拥护党的领导,本文章所用技术乃出于工作需要,敬请谅解. 正文 可以先过去快速浏览一遍再 ...

  8. 华为云MVP：来自工业制造领域的微服务与云平台实践

    [摘要] 首先,和大家先聊聊的是为什么微服务.DevOps和云计算会在各个产业大行其道;其次,再谈谈微服务架构设计有那些自己独特的设计思想,和传统的SOA有什么区别;最后,我们再一起看一看在工业领域云 ...

  9. 在Linux下生成crypt加密密码

    [摘要]当我们用红帽Kickstart脚本或useradd或其他方式写东西的时候,经常会需要用到crypt命令加密生成的密码格式.那么,有没有其他方式可以生成这种格式的密码?事实上,方法有很多 1.我 ...

  10. CF1236B Alice and the List of Presents

    题意翻译 有nn种物品和mm个背包,每种物品有无限个,现将若干个物品放到这些背包中,满足: 1.每个背包里不能出现相同种类的物品(允许有空背包): 2.在所有的mm个背包中,每种物品都出现过. 求方案 ...