单行文本

<!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. Windows7系统下优化固态硬盘

    一.AHCI硬盘模式可提高硬盘性能,确定你的固态硬盘是运行在AHCI模式下,打开“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Servicesmsahci” ...

  2. Codefoces 436 B. Om Nom and Spiders

    纯属练习JAVA.... B. Om Nom and Spiders time limit per test 3 seconds memory limit per test 256 megabytes ...

  3. [Bash] View Files and Folders in Bash

    Sometimes when working at the command line, it can be handy to view a file’s contents right in the t ...

  4. 【OpenGL】Shader实例分析（七）- 雪花飘落效果

    转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如 ...

  5. 是男人就下100层【第四层】——Crazy贪吃蛇（2）

    在上一篇<是男人就下100层[第四层]--Crazy贪吃蛇(1)>中我们让贪吃蛇移动了起来,接下来我们来实现让贪吃蛇能够绕着手机屏幕边线移动而且能够改变方向 一.加入状态并改动代码 首先我 ...

  6. SQL 通用数据类型

    SQL 通用数据类型 数据类型定义列中存放的值的种类. SQL 通用数据类型 数据库表中的每个列都要求有名称和数据类型.Each column in a database table is requi ...

  7. webstorm 6.0 注册码

    User Name: EMBRACE   License Key: ===== LICENSE BEGIN ===== 24718-12042010 00001h6wzKLpfo3gmjJ8xoTPw ...

  8. oracle获取字符串长度函数length()和lengthb()

    oracle获取字符串长度函数length()和lengthb()   lengthb(string)计算string所占的字节长度:返回字符串的长度,单位是字节 length(string)计算st ...

  9. iOS音频播放 (四)：AudioFile 转

    原文出处 : http://msching.github.io/blog/2014/07/19/audio-in-ios-4/ 前言 接着第三篇的AudioStreamFile这一篇要来聊一下Audi ...

  10. 2016/2/29 html 思维导图