单行文本

<!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. XP 系统如何安装.NET Framework4.0

    1 运行CMD,然后输入命令net stop WuAuServ   2 打开C盘的Windows目录,然后找到SoftwareDistribution文件夹改名为SDold.   3 在CMD窗口中输 ...

  2. Android MediaRecorder录音与播放

    上一篇讲到了使用意图录音.这篇文章将使用MediaRecorder类来录音,从而提供很多其它的灵活性. 效果图: 源码奉上: <LinearLayout xmlns:android=" ...

  3. Linux登录自动切换root账户与历史命令优化

    1:当我们Linux系统优化完成,会使用oldboy用户远程连接CRT登录,每次连接都需要使用sudo su - 或者su - 输入密码登录,请问如何在CRT连接的时候自动的切换到root账户,(提示 ...

  4. A7139 无线通信驱动(STM32) 添加FIFO扩展模式，能够发送超大数据包

    A7139 拥有电磁波唤醒以及10mW的发射功率,很easy实现长距离通信,眼下測试有障碍物能够轻松达到300m以上. 通过几天的调试,眼下能够发送随意大小的数据包,大小为1-16KB.所有使用中断收 ...

  5. 数据结构与算法问题 AVL二叉平衡树

    AVL树是带有平衡条件的二叉查找树. 这个平衡条件必须保持,并且它必须保证树的深度是O(logN). 一棵AVL树是其每一个节点的左子树和右子树的高度最多差1的二叉查找树. (空树的高度定义为-1). ...

  6. CSDN公开课：SCRUM敏捷开发（2015-8-19 免费）

    当前最火的敏捷可能就是SCRUM了.但敏捷无法落地.对人要求太高.老板对敏捷动机不良等问题怎样解决呢?我将在CSDN的公开课上为大家分享"SCRUM敏捷开发".各位朋友有杀错没放过 ...

  7. 2016/4/17 去除 ul ol 前标记 list-style：none list-style-type:none

    对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  8. Dos下同时执行多条命令简化操作

    起因,要查询8080端口被哪些程序占用了,但是直接在cmd netstat –ano 的话 一下子一大把数据出来了不利于查找, 于是就想起dos下可以同时指向多条命令,如是写下如下命令: netsta ...

  9. debian包之间的关系

    1 debian包之间存在两大类关系 第一,依赖 第二,冲突 2 依赖类关系 2.1 depends 2.2 pre-depends 2.3 recommends 2.4 suggests 2.5 e ...

  10. bzoj3612: [Heoi2014]平衡

    首先不可重的整数规划是fi,j=fi-1,j-i+fi,j-i的 然后现在加了一个限制,分成的数不能超过n,那么对于拼大于n的数的时候多减一个fi-1,j-n-1 接下来是优化代码暴露我自带巨大常数的 ...