<!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. 前端知识点回顾——Javascript篇(五)

    DOM 常用的DOM获取方法: node.children 返回子元素节点,没有兼容性问题,动态获取 node.parentNode 获取父节点,没有兼容性问题 node.offsetParent 获 ...

  2. js-xlsx

    XLSX.read(data, {type: type}); type主要取值如下: base64: 以base64方式读取: binary: BinaryString格式(byte n is dat ...

  3. 基于Python使用scrapy-redis框架实现分布式爬虫

    1.首先介绍一下:scrapy-redis框架 scrapy-redis:一个三方的基于redis的分布式爬虫框架,配合scrapy使用,让爬虫具有了分布式爬取的功能.github地址: https: ...

  4. Callable和Supplier的区别

    A Callable is "A task that returns a result, while a Supplier is "a supplier of results&qu ...

  5. 小D课堂 - 新版本微服务springcloud+Docker教程_6-05 高级篇幅之高并发情况下

    笔记 5.高级篇幅之高并发情况下接口限流特技         简介:谷歌guava框架介绍,网关限流使用 1.nginx层限流 2.网关层限流 开始 mysql最大的连接数就是3千多.如果想把应用搞好 ...

  6. 问题root@localhost's password:localhost:permission denied,please try again

    转载:https://www.cnblogs.com/hmy-blog/p/6500909.html 经过试验,上述方法在我的电脑中没有成功. 1.安装 open ssh:sudo apt-get i ...

  7. jmeter之吞吐量控制器

    比如说有一种场景是,10个并发里,有2个事操作业务A,有8个是操作业务B,要模拟这种业务场景,则可以通过吞吐量控制器来模拟 目录 1.用法 2.举例 1.用法 第一种:设置比例控制 选择percent ...

  8. Requests API

    Requests API http://docs.python-requests.org/en/latest/ requests的具体安装过程请看: http://docs.python-reques ...

  9. salt收集windows服务器日志时间

    定义收集时间区间: time.ps1 $a = get-date $b = $a.adddays(-) $c = $b.tostring('yyyy-MM-dd') $d = get-date -fo ...

  10. JAVA 面向对象编程 --自我总结

    子系统 系统结构是指由系统多个子系统组成,以及子系统由多个更小的子系统组成的结构.那么子系统又具备哪些特点呢? 特点: 1.结构的稳定性 :软件在设计阶段,在把一个系统划分成更小的子系统时,设计合理, ...