<!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. 前端知识点回顾之重点篇——ES6的Promise对象

    Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...

  2. 关于Server2008 R2日志的查看

    Server 2008 r2通过 系统事件查看器 分析日志: 查看 系统 事件: 事件ID号: 审计目录服务访问 4934 - Active Directory 对象的属性被复制 4935 -复制失败 ...

  3. java序列化与反序列化操作redis

     笔者在使用SSM框架项目部分功能进行测试需要使用到对象的序列化与反序列化 第一种方式:jackson Demo package com.dznfit.service; import com.dznf ...

  4. 关于java面试题

    java的优点: Java是一种跨平台,适合于分布式计算环境的面向对象编程语言. 具体来说,它具有如下特性: 简单性.面向对象.分布式.解释型.可靠.安全.平台无关.可移植.高性能.多线程.动态性等.

  5. （转载）详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  6. laravel redis存数组并设置过期时间

    $data = [ 'zoneList'=>$zoneList, 'eqList' => $eqList, 'mdateList' => $mdateList ]; Redis::s ...

  7. mysql对数据的操作

    增: insert into 表名(字段,字段,字段) values(值,值,值): insert into 表名 values(值,值,值): insert into 表名 set 字段=值, 字段 ...

  8. POJ1703Find them, Catch them 【种类并查集】

    题目链接:http://poj.org/problem?id=1703 题目大意:给n个人,m次询问.A代表询问a, b之间的关系,D代表给出a, b属于不同的帮派. 我的想法: 太菜了,上课的时候没 ...

  9. nginx多线程高并发

    直接上图 Master-Worker模式 1.Nginx 在启动后,会有一个 master 进程和多个相互独立的 worker 进程. 2.接收来自外界的信号,向各worker进程发送信号,每个进程都 ...

  10. 移动端1px的边框

    我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每 ...