<!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. springboot 底层 JackSon 的使用

    Jackson常用的注解使用和使用场景: 接下来我们在看一段代码,这段代码是常用注解在实体类User中的简单使用:package zone.reborn.springbootstudy.entity; ...

  2. 012-数据结构-树形结构-哈希树[hashtree]、字典树[trietree]、后缀树

    一.哈希树概述 1.1..其他树背景 二叉排序树,平衡二叉树,红黑树等二叉排序树.在大数据量时树高很深,我们不断向下找寻值时会比较很多次.二叉排序树自身是有顺序结构的,每个结点除最小结点和最大结点外都 ...

  3. iscsi序列一、搭建iscsi存储系统

    一.NAS和SAN服务器概述 SAS: 容量小, 300G, 600G, 900G, 价格贵. SATA:容量大,500G, 750G, 1T, 2T, 3T, 4T   不支持热插拔,价格低. 假S ...

  4. Docker save and load镜像保存

    持久化docker的镜像或容器的方法 Docker的镜像和容器可以有两种方式来导出 docker save #ID or #Name docker export #ID or #Name docker ...

  5. 删除指定路径下固定格式，以.log结尾、三天前的文件，或删除空的日志文件

    师出‘百测’besttest 删除指定路径下固定格式,以.log结尾.三天前的文件,或删除空的日志文件. 日志文件格式:XXXX_2019-01-01.log. import os,datetime ...

  6. 【JulyEdu-Python基础】第 8 课：Python第三方库

    outline 数值计算 numpy 数据处理分析 pandas 可视化 matplotlib/seaborn 机器学习 Sklearn / keras 交互 pygame 网络 Selen ...

  7. Leetcode之动态规划（DP）专题-123. 买卖股票的最佳时机 III（Best Time to Buy and Sell Stock III）

    Leetcode之动态规划(DP)专题-123. 买卖股票的最佳时机 III(Best Time to Buy and Sell Stock III) 股票问题: 121. 买卖股票的最佳时机 122 ...

  8. 【并行计算-CUDA开发】CUDA ---- Warp解析

    Warp 逻辑上,所有thread是并行的,但是,从硬件的角度来说,实际上并不是所有的thread能够在同一时刻执行,接下来我们将解释有关warp的一些本质. Warps and Thread Blo ...

  9. Similar String Groups

    Two strings X and Y are similar if we can swap two letters (in different positions) of X, so that it ...

  10. 点了安装SQL2000后没反应了的处理方法

    摘自JerrY的博客 http://blog.sina.com.cn/s/blog_403ef7e80101iy3p.html 点了安装SQL2000后没反应了的处理方法 以前的时候给客户电脑安装SQ ...