display: table-cell里面文字打点的方法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<style>
.clearfix:after {
content: '';
display: table;
clear: both;
} .clearfix {
*zoom: 1;
} .cr {
background-color: red;
} .cg {
background-color: green;
} .float-left {
float: left;
margin-right: 10px;
width: 100px;
height: 300px;
} .auto-right {
display: table-cell;
width: 10000px;
height: 200px;
} .fixed-table {
font-size: 40px;
display: table;
table-layout: fixed;
width: 100%; } .fixed-table div {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head> <body>
<div class="clearfix">
<div class="float-left cr"></div>
<div class="auto-right cg">
<div class="fixed-table">
<div>
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</div>
</div>
</div>
</div>
</body> </html>
display: table-cell里面文字打点的方法的更多相关文章
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- css Table布局：基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table
一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...
- display:table和display:table-cell结合使用
.GoodList{ display :table; height :54px; width :56px; line-height: 14px padding: 0 1 ...
- display:table和display:table-cell的妙用
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...
- display:table的几个妙用：垂直居中、浮动……
一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...
- display:table布局总结
1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- display:table / display:table-cell 用法
display:table 元素会作为块级表格来显示(类似table):表格前后带有换行符: display:table-cell 元素会作为表格单元格来显示(类似<td> 和 < ...
随机推荐
- 第一个Python程序 | 机选彩票号码+爬取最新开奖号码
(机选彩票号码+爬取最新开奖号码 | 2021-04-21) 学习记录,好记不如烂笔头 这个程序作用是<机选三种彩票类型的号码> 程序内包含功能有如下: 自动获取最新的三种彩票的开奖号码 ...
- JS 的立即执行函数
JS 的立即执行函数 本文写于 2019 年 12 月 7 日 其实 ES6 之后有了之后,很多之前的用法都没必要了,立即执行函数就是其一. 今天看到一道面试题: 请「用自己的语言」简述 立即执行函数 ...
- mysql5.7介绍和安装
环境准备: 1.关闭防火墙和selinux systemctl stop firewalldsystemctl stop SElinux 2. 如果安装过mariadb需要停止且卸载服务 system ...
- Linux磁盘空间查看及空间满的处理
问题 在部署应用到测试环境的时候,有些文件同步出错,最后定位到测试服务器空间满了. 解决 查看磁盘空间还剩多少空间 df -h 查看根目录下每个目录占用空间大小 du --max-depth=1 -h ...
- 干掉Switch-Case、If-Else----订阅发布模式+事件驱动模式
在上位机和下位机或者服务端和客户端通信的时候,很多时候可能为了赶项目进度或者写代码方便直接使用Socket通信,传输string类型的关键字驱动对应的事件,这就有可能导致程序中存在大量的Switch- ...
- A* K短路
注:\(A*\) 求解K短路效率极其低下,时间复杂度\(O(nklog\ n)\),空间视题目而定,因为本质是爆搜,可求解数据范围较小的题目. 我们使用\(A*\)求解k短路: 首先需要预处理出估价函 ...
- 「ARC138E」Decreasing Subsequence（n logn 做法）
考虑一张 \(n\) 个点的图(\(V=\{0,1,\cdots,n\}\)):点 \(i\) 连向 \(a_i-1\),即 \(\text{index}\) 连向 \(\text{value}\). ...
- Solon 1.8.3 发布，云原生微服务开发框架
相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...
- Hexo + VSCode 插入 Markdown 图片解决办法
最近打开 typora 时发现弹窗强更,不让用 beta 版了 想到自己并不是非常需要 WYSIWYG,而且也不是经常使用 typora,于是直接退回到 VSCode 了,而且在 VSCode 里可以 ...
- React技巧之字符串插值
原文链接:https://bobbyhadz.com/blog/react-string-interpolation 作者:Borislav Hadzhiev 正文从这开始~ 总览 在React中,使 ...