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

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

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. Spring Cloud 快速教程

    官方:http://projects.spring.io/spring-cloud/ 中文:https://springcloud.cc/ https://blog.csdn.net/forezp/a ...

  2. Usbhub驱动编译

    在3g 4g的usb驱动基础上,加入以下部分,就可以驱动hub了 kmod-usb-hid 3.3.8-1 kmod-usbip 3.3.8-1 kmod-usbip-client 3.3.8-1 k ...

  3. sublime 最近用的有点卡

    index_files:false,

  4. 测试教程网.unittest教程.6. 命令行接口

    From: http://www.testclass.net/pyunit/commind_line_interface/ 背景 unittest支持命令行接口,我们可以在命令行里指定运行具体的测试用 ...

  5. PureMVC剖析

    http://www.cnblogs.com/skynet/archive/2013/01/29/2881244.html http://hi.baidu.com/mmforever/item/408 ...

  6. 将 GitHub 的某人的特定仓库复制到自己的账户下 的方法

    访问仓库页面,点击 Fork 按钮创建自己的仓库 Fork 就是将 GitHub 的某个特定仓库复制到自己的账户下. Fork 出的仓库与原仓库是两个不同的仓库,开发者可以随意编辑. 新建的仓库名为& ...

  7. Java学习——多线程例子:李四王五

    package cys; public class Example9_2 { public static void main(String[] args) { // TODO Auto-generat ...

  8. onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

    onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

  9. IDC:UPS(不间断电源)

    ylbtech-IDC:UPS(不间断电源) UPS(Uninterruptible Power System/Uninterruptible Power Supply),即不间断电源,是将蓄电池(多 ...

  10. 廖雪峰Java1-4数组操作-5命令行参数

    adb和ideviceinstaller提供了许多参数供我们使用.命令行参数提供了这样的入口,针对不同的参数执行不同的命令. 1.命令行参数 命令行参数是一个String[] 数组,由JVM接收用户输 ...