<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>文字多余部分隐藏</title>

         <style>

             .content {

                 width: 300px;

                 height: 100px;

                 border: 1px solid #ccc;

                 margin: 0 auto;

             }

             span {

                 display: block;

             }

             /* 单行省略显示 */

             .main {

                 overflow: hidden;

                 text-overflow: ellipsis;

                 white-space: nowrap;

             }

             /* 多行省略显示 */

             .main1 {

                 overflow: hidden;

                 /* 将对象作为弹性伸缩盒子模型显示 。 */

                 display: -webkit-box;

                 /* 设置或检索伸缩盒对象的子元素的排列方式 。 */

                 -webkit-box-orient: vertical;

                 /* 显示为文本行数 */

                 -webkit-line-clamp: 3;

                 box-sizing: border-box;

             }

         </style>

     </head>

     <body>

         <div class="content">

             <span class="main">我是单行文字，多余部分会被省略我是单行文字，多余部分会被省略</span>

             <span class="main1">我是多行文字，多余部分会被省略，我是多行文字，多余部分会被省略我是多行文字，多余部分会被省略我是多行文字，多余部分会被省略我是多行文字，多余部分会被省略<span>

         </div>

     </body>

 </html>

CSS3溢出文字省略的更多相关文章

  1. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  2. 【CSS/JS学习】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

    引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或 ...

  3. 【CSS/JS】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

    写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实 ...

  4. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  5. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  6. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  7. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  8. css实现隐藏多余溢出文字并显示省略号

    <meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; ove ...

  9. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

随机推荐

  1. TP5连接数据库和phpstrom连接数据库（宝塔面板数据库连接）

    1.编译器:phpstrom 框架:TP5 服务器面板:宝塔面板 2.我遇到的核心问题:数据库.用户名.密码均正确但是无法连接, 使用宝塔面板的都知道phpmyadmin的端口号是888,注意注意这个 ...

  2. Oracle面试题

    0.绑定变量的优缺点及使用场合分别是什么? 优点:能够避免SQL的硬解析以及与之相关的额外开销(SQL语法.语义的分析.逻辑分析.生成较佳的执行计划等开销),提高执行效率. 缺点:如果在表存在数据倾斜 ...

  3. delphi ADOCONNECTION异常拦截

    elphi ADOCONNECTION错误拦截错误框标题:   Debugger Exception Notification内容:   Project KJXX.exe raised excepti ...

  4. Tanimoto Coefficient

    Tanimoto Coefficient The Tanimoto coefficient between two points, a and b, with k dimensions is calc ...

  5. How to remove duplicate lines in a large text file?

    How would you remove duplicate lines from a file that is  much too large to fit in memory? The dupli ...

  6. curl指令的坑

    今天使用curl指令构造一个docker api访问,一直得不到预期的结果.调试了半天,发现是网址没加引号. token=$(curl -v -XGET -H >& 由于网址跟了一串参数 ...

  7. C++中非数nan的定义与范例

    /* * C++中非数的定义 NaN :阶码的每个二进制位全为1  并且  尾数不为0: 无穷:阶码的每个二进制位全为1  并且  尾数为0:符号位为0,是正无穷, 符号位为1是负无穷.所以NaN.正 ...

  8. Win10编译Mingw

    准备工具 Windows平台 cmake mingw-x64 Linux平台(Ubuntu) sudo apt-get install git cmake cmake-gui -y 下载源码 建议直接 ...

  9. 从零探索Java网络编程01之 TCP/IP 与 Socket

    最近完成了几项比较简单的项目, 终于是在996里偷了点闲暇时光, 想着来研究研究些啥吧?  一个普通的控制台日志映入了我的眼帘(孽缘呀): (图中使用 SpringBoot 的 log4j 来输出日志 ...

  10. CSRF类型

    按照请求类型来区分.分为:GET类型和POST类型 按照攻击类型分类,CSRF可分为:HTML CSRF攻击,JSOM HiJacking攻击和FIash CSRF攻击 HTML CSRF攻击 HTM ...