1.一行显示并出现省略号

1)三个属性:

 overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;

2)网上张大神想出来的margin-top负值的办法:

<div class="box">
    <div class="wz">文字内容</div>
    <div class="dot">...</div>
</div>

CSS:

  

.box{
    width:设定宽度;
    height:设定高度;
    overflow:hidden;
  }
.wz{
    float:left;
    height:设定同样的高度;
    margin-right:这里的大小是给省略号留的空间;
  }
.dot{
    float:right;
    width:刚才留的空间大小;
    height:设定同样的高度;
    margin-top:与高度一样的值的负数;
  }

  这种方法应该是兼容所有的浏览器。

  还有用js或者插件来解决的方法,感觉有点麻烦。

2.两行显示,第二行出现省略号

当文字强制两行显示,并且在第二行才出现省略号。解决办法:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

兼容性不太好,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。

Div里超出部分,省略号显示的更多相关文章

  1. css实现文本超出部分省略号显示

    一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...

  2. CSS div内文字显示两行,超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  3. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  4. HTML5--div、span超出部分省略号显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. div内容超出后自动显示滚动条

    一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不 ...

  6. css文本截字,超出文本省略号显示

    一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: h ...

  7. 微信小程序 实现多行文字 超出部分省略号显示

    在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...

  8. css 实现div内显示两行或三行,超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  9. h5文字超出,两行显示,超出显示省略号

    最近接到一个需求,要求商场导航里的文字最多显示两行,超出两行的省略号显示,查一些资料,又根据自己的需求,改了很多,直接上代码吧 <html> <head> <style ...

随机推荐

  1. B. Forgery

    链接 [http://codeforces.com/contest/1059/problem/B] 题意 要伪造医生签名,先给你医生的签名nm的网格'.'表示空白',#'表示墨水,你的笔可以这么画以一 ...

  2. 作业20171019 alpha-1成绩

    申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年11月21日 12:00. 总结 普遍成绩有明显上升,归功于1. 团队全都超额完成1次站立会议,多数团队完超额2次; ...

  3. Pair Project —— Elevator Scheduler

    结对编程人员 12061153 刘丽萍 12061154 冯飘飘 说明结对编程的优点和缺点. 结对编程的优点: 以前都是自己一个人编程,对于相互结对或者团队编程都没有接触过.而自己在写代码时不可避免的 ...

  4. Linux内核分析-系统中断在内核中的实现

    分析system_call中断处理过程 在MenuOS中添加上周所运用到的系统调用 即在Linuxkernel/menu/test.c文件中,添加代码如下: int Mkdir() { const c ...

  5. Leetcode——58.最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  6. 第三个Sprint冲刺第六天(燃尽图)

  7. tensorflow win10 系统下安装

    安装tensorflow gpu版本 Step1 安装CUDA8.0 进入这个云盘地址下载,密码5aoc 进行CUDA8.0下载.下载完成后解压,打开exe文件直接按照默认进行安装,安装步骤比较繁琐, ...

  8. jmeter 使用csv文件 注意项

    1.首先在jmeter 中导入csv文件时我们程序并不知道csv文件中有多少行 : >1.获取的时候 使用 循环控制器来获取csv文件中的所有数据 : 通过 ${__jexl3("${ ...

  9. 转帖 Oracle 主键的处理方法 http://www.cnblogs.com/Richardzhu/p/3470929.html

    Oracle之主键的创建.添加.删除操作   一.创建表的同时创建主键约束 1.1.无命名 SQL> create table jack (id int primary key not null ...

  10. Centos6.5下VNC Server配置

    整个流程如下~ 1.首先,检查下本机是否安装了vnc: 提示没有安装,那么开始装吧: 2.先关闭防火墙 查看防火墙状态: 关闭防火墙: 注:要切到root下 [carsonzhu@localhost ...