首先标签必须满足不是行内标签

方法一:(单行)此方法没有任何问题

width: 38px;(需要给定宽度)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

方法二:(多行)此方法浏览器兼容有问题,比如IE,火狐不行

width: 38px;(需要给定宽度)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;(行数)
-webkit-box-orient: vertical;

方法三:(多行)after属性 可能在文字对齐上没有之前的优美

容器名{
  max-height: 64px;
  overflow: hidden;
  margin: 5px 0;
  word-wrap:break-word;
  position: relative;
  padding: 0 10px 0 0;
}
容器名:after{
  content: "...";
  position: absolute;
  right: 0;
  bottom:0;
}

html内容溢出部分...的更多相关文章

  1. table表格中的内容溢出布局方式

    什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...

  2. css3内容溢出属性

    overflow是css2.0的属性,css3中新增了overflow-x和overflow-y属性. overflow-x主要是用来定义对水平方向内容溢出的剪切,而overflow-y主要是用来定义 ...

  3. [CSS]overflow内容溢出

      定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有 ...

  4. 关于client浏览器界面文字内容溢出用省略号表示方法

    在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省 ...

  5. CSS:overflow 内容溢出属性

    overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...

  6. CSS基础 overflow 内容溢出部分显示效果

    属性:overflow 值 作用 visible 默认,内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出,都有滚动条 auto 有内容溢出,自动显示滚动条

  7. 关于css清除浮动,解决内容溢出的问题

    以前在布局的时候总会遇到这样的问题,比如我想让整体的内容居中,所以会这样写, .main-content{ width:960px:height:300px;margin:0px auto; } 然后 ...

  8. css如何实现多行文本时,内容溢出,出现省略号

    一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...

  9. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  10. jQuery关于文字内容溢出用点点点(…)省略号表示

    1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each( ...

随机推荐

  1. 概率p输出1,概率1-p输出0,等概率输出0和1

    有个输出0和1的BIASED RANDOM,它以概率p输出1,以概率1-p输出0,以此RANDOM函数为基础,生成另一个RANDOM函数,该函数以1/2的概率输出1,以1/2的概率输出0 题目解答: ...

  2. 【java】运算符

    Java的运算符,分为四类: 算数运算符.关系运算符.逻辑运算符.位运算符. 算数运算符(9):+  -  *  /  %  ++  -- 关系运算符(6):==  !=  >  >=   ...

  3. SPI 核软件调试记录

    SPI 核软件调试记录 1.首先说说int SpiFlashWaitForFlashReady(void)这一函数,基本上其它函数在执行的时候,都会事先执行一次此函数.    因为此函数的作用主要是用 ...

  4. 回看《例说FPGA》---DDR2控制器集成与读写测试

    回看<例说FPGA> ---DDR2控制器集成与读写测试 1.DDR2 IP核的配置 需要弄清楚的选项主要有: PLL reference clock frequency Memory c ...

  5. 基于select类型多路IO复用,实现简单socket并发

    还有很多缺限,如客户断开无限重复 以下转至老师博客: server: #!/usr/bin/env python # -*- coding: utf-8 -*- __author__ = " ...

  6. Nuke的色彩匹配节点思路

    大致思路是首先利用node.sample()自带采样功能对整个画面逐像素采 样,我把采样函数写的比较灵活,可以定义一个采样族,即把整个画面分成若干块,逐块采样,很大程度上减少了采样工作量,但相对精度会 ...

  7. x230安装黑苹果

    https://forum.51nb.com/forum.php?mod=viewthread&tid=1802786&extra=page%3D1&page=1 下载 主要就 ...

  8. 30 个java编程技巧(最佳实践的初学者)

    1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 ”if else” 判断null元素. Java 的 ...

  9. ALGO-145_蓝桥杯_算法训练_4-1打印下述图形

    记: 这里用到了printf("%*s%s%*s\n",n-i,"",arr,n-i,"");的写法, 其中%*s中的*代表该字符串s的个数 ...

  10. Windows下利用TortoiseSVN搭建本地SVN服务器

    写在前面: 安装TortoiseSVN时,图中这步要选择,才能同时安装后面需要的svnserve.exe 环境说明: Win 7 TortoiseSVN 1.7 搭建步骤: 0. 新建一个目录,做&q ...