<!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. 把文档中的数据取出并插入到excel中

    from xlrd import open_workbookfrom xlutils.copy import copy jsonfile=r'C:\Users\Administrator\Deskto ...

  2. 一百二十三：CMS系统之登录功能

    配置文件中加入前台用户的身份标识 form class SigninForm(BaseForm): telephone = StringField(validators=[Regexp(r'1[345 ...

  3. Java中传入一个时间范围，取出该时间范围内所有日期的集合

    直接上代码: import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; impor ...

  4. 树莓派-为Ubuntu Mate更换国内源 [转]

    更换步骤以root身份打开 /etc/apt/sources.list    将 http://ports.ubuntu.com/ 全部替换为中科大的源 http://mirrors.ustc.edu ...

  5. 启动nfs清除端口占用过程

    centos7起nfs服务. 按教程执行: vim /etc/exportsyum install -y nfs-utils systemctl enable rpcbind.service syst ...

  6. 什么是MapReduce？

    [学习笔记] 什么是MapReduce?马 克-to-win @ 马克java社区:1)MapReduce是面向大数据并行程序设计的模型和方法,这一点很像我们前面讲的MVC,MVC解决动态网站问题而 ...

  7. Spring RestTemplate详解(转载)

    转载来源:https://www.cnblogs.com/zhaoyan001/p/8442602.html 1.什么是REST? REST(RepresentationalState Transfe ...

  8. vue工程中，如何查询用户访问的地理位置 + vue中的jsonp

    有一个需求,就是当用户访问你们公司的网站时,需要查到这位用户的地理位置(通过电脑ip来访问) 试了很多方法,感觉使用腾讯的位置服务api最好,返回的信息最全,包括经纬度,国家城市地区等.而其他绝大多数 ...

  9. 动态加载js不执行解决办法

    这个问题的产生原因是:我们项目有一个主index文件,在主index文件中需要根据参数来判断是加载pc.html的内容还是加载mobile.html的内容,一开始是使用jquery来做的,没有问题,后 ...

  10. 浅谈 OpenResty，基于opebresty+redis进行实时线上限流

    一．前言 我们都知道Nginx有很多的特性和好处,但是在Nginx上开发成了一个难题,Nginx模块需要用C开发,而且必须符合一系列复杂的规则,最重要的用C开发模块必须要熟悉Nginx的源代码,使得开 ...