单行文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .contain {

            width: 300px;

            height: 28px;

            line-height: 28px;

            margin: 50px 0 0 50px;

            border: 1px solid rgb(0, 255, 128);

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

    </style>

</head>

<body>

    <div class="contain">

        <span class="box">去年的五月正是我在北平吃青杏的季节，今年的五月我生活的痛苦真是有如青杏般苦涩。</span>

    </div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

       .box {

           display: -webkit-box;

           width: 200px;

           line-height: 1.5;

           margin: 50px 0 0 50px;

           border: 1px solid rgb(0, 255, 128);

           overflow: hidden;

           -webkit-box-orient: vertical;

           -webkit-line-clamp: 2;

        }

    </style>

</head>

<body>

    <div class="contain">

        <span class="box">去年的五月正是我在北平吃青杏的季节，今年的五月我生活的痛苦真是有如青杏般苦涩。</span>

    </div>

</body>

</html>

css超出部分显示省略号的更多相关文章

  1. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  2. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  3. CSS超出部分显示省略号…代码

    让DIV,LI等元素超出部分文字用省略号…显示. 示例: 兼容IE/Firefox/Chrome 代码: display:block;white-space:nowrap; overflow:hidd ...

  4. css 超出部分显示省略号 汇总

    单行: 加宽度 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行: display: -webkit-box; -we ...

  5. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

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

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

  7. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

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

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

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

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

随机推荐

  1. 通过grub硬盘安装centos7

    centos7与centos6.x有了很大的不同,从硬盘安装的方法也有了很大的不同,故出此文章我机器环境如下:    有俩系统 Win7 和 RHEL6.4 ,是通过grub(非grub2)引导的,g ...

  2. Centos7 Samba 独立账户

    创建了一个组:smbgrp 和用户srijan通过认证来访问Samba服务器. groupadd smbgrp useradd srijan -G smbgrp smbpasswd -a srijan ...

  3. Phalcon 开发工具（Phalcon Developer Tools）

    Phalcon提供的这个开发工具主要是用来辅助开发,比方生成一些程序的基本框架.生成控制器模型等. 使用这个工具我们仅仅须要一个简单的命令就可以生成应用的基本框架. 很重要: 要使用这个工具我们必需要 ...

  4. 在DIV中自己主动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自己主动换行. 它们的差别就在于: 1,word-break:break-all 比如di ...

  5. Object.getOwnPropertyNames()

    1.Object.getOwnPropertyNames(),遍历实例属性(包括不可枚举),返回属性名组成的数组 var arr = ["a", "b", &q ...

  6. Android开发——本地验证码的简易实现

    0.  前言   验证码无处不在.有人问我,你知道达芬奇password以下是什么吗,对.答案就是达芬奇验证码. 验证码一个最基本的作用就是防止恶意暴力破解登录,防止不间断的登录尝试,事实上能够在se ...

  7. 使用Blender批量导出/转换模型

    2.4版本号的Blender API和2.5以上版本号的API有非常大的不同,这里仅仅是提供了思路和2.4版本号的导出方案. 先提供一个脚本,这个是由Blender调用的.用于转换Ogre的Mesh文 ...

  8. for循环console输出结果的问题

    我想定时打印出一串数字,写好了如下代码 for (var i = 0; i < 5; i++) {   setTimeout(function () {     console.log(i); ...

  9. Hibernate中二级缓存指的是什么？

    一.一级缓存.二级缓存的概念解释 (1)一级缓存就是Session级别的缓存,一个Session做了一个查询操作,它会把这个操作的结果放在一级缓存中,如果短时间内这个 session(一定要同一个se ...

  10. css class嵌套

    css 代码: <style> .chose_bonus { font-size:9px;width:400px;border: 2px solid #dddddd;margin-top: ...