Div里超出部分,省略号显示
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里超出部分,省略号显示的更多相关文章
- css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...
- CSS div内文字显示两行,超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- HTML5--div、span超出部分省略号显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div内容超出后自动显示滚动条
一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不 ...
- css文本截字,超出文本省略号显示
一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: h ...
- 微信小程序 实现多行文字 超出部分省略号显示
在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...
- css 实现div内显示两行或三行,超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示 ...
- h5文字超出,两行显示,超出显示省略号
最近接到一个需求,要求商场导航里的文字最多显示两行,超出两行的省略号显示,查一些资料,又根据自己的需求,改了很多,直接上代码吧 <html> <head> <style ...
随机推荐
- B. Forgery
链接 [http://codeforces.com/contest/1059/problem/B] 题意 要伪造医生签名,先给你医生的签名nm的网格'.'表示空白',#'表示墨水,你的笔可以这么画以一 ...
- 作业20171019 alpha-1成绩
申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年11月21日 12:00. 总结 普遍成绩有明显上升,归功于1. 团队全都超额完成1次站立会议,多数团队完超额2次; ...
- Pair Project —— Elevator Scheduler
结对编程人员 12061153 刘丽萍 12061154 冯飘飘 说明结对编程的优点和缺点. 结对编程的优点: 以前都是自己一个人编程,对于相互结对或者团队编程都没有接触过.而自己在写代码时不可避免的 ...
- Linux内核分析-系统中断在内核中的实现
分析system_call中断处理过程 在MenuOS中添加上周所运用到的系统调用 即在Linuxkernel/menu/test.c文件中,添加代码如下: int Mkdir() { const c ...
- Leetcode——58.最后一个单词的长度
给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...
- 第三个Sprint冲刺第六天(燃尽图)
- tensorflow win10 系统下安装
安装tensorflow gpu版本 Step1 安装CUDA8.0 进入这个云盘地址下载,密码5aoc 进行CUDA8.0下载.下载完成后解压,打开exe文件直接按照默认进行安装,安装步骤比较繁琐, ...
- jmeter 使用csv文件 注意项
1.首先在jmeter 中导入csv文件时我们程序并不知道csv文件中有多少行 : >1.获取的时候 使用 循环控制器来获取csv文件中的所有数据 : 通过 ${__jexl3("${ ...
- 转帖 Oracle 主键的处理方法 http://www.cnblogs.com/Richardzhu/p/3470929.html
Oracle之主键的创建.添加.删除操作 一.创建表的同时创建主键约束 1.1.无命名 SQL> create table jack (id int primary key not null ...
- Centos6.5下VNC Server配置
整个流程如下~ 1.首先,检查下本机是否安装了vnc: 提示没有安装,那么开始装吧: 2.先关闭防火墙 查看防火墙状态: 关闭防火墙: 注:要切到root下 [carsonzhu@localhost ...