<!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里面文字打点的方法的更多相关文章

  1. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  2. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  3. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  4. VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  5. display:table和display:table-cell结合使用

    .GoodList{ display :table; height :54px; width :56px; line-height: 14px                 padding: 0 1 ...

  6. display:table和display:table-cell的妙用

    display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...

  7. display:table的几个妙用：垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  8. display:table布局总结

    1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  9. display:table / display:table-cell 用法

    display:table  元素会作为块级表格来显示(类似table):表格前后带有换行符: display:table-cell 元素会作为表格单元格来显示(类似<td> 和 < ...

随机推荐

  1. 老生常谈系列之Aop--Spring Aop源码解析（二）

    老生常谈系列之Aop--Spring Aop源码解析(二) 前言 上一篇文章老生常谈系列之Aop--Spring Aop源码解析(一)已经介绍完Spring Aop获取advice切面增强方法的逻辑, ...

  2. jQuery.extend()[$.extend()]

    jQuery.extend(target, object1[,objectN]);jQuery.extend([deep], target, object1[,objectN]);jQuery.ext ...

  3. webpack与vite的对比

    vite与webpack的打包原理: vite: 基于游览器原生ES Module,利用游览器解析import,服务器端按需编译返回 webpack: 逐级递归识别依赖,构建依赖图谱->转化AS ...

  4. 521. Longest Uncommon Subsequence I - LeetCode

    Question 521. Longest Uncommon Subsequence I Solution 题目大意:给两个字符串,找出非共同子串的最大长度 思路:字符串相等就返回-1,不等就返回长度 ...

  5. 455. Assign Cookies - LeetCode

    Question 455. Assign Cookies Solution 题目大意:数组g的大小表示有几个小孩,每个元素表示小孩的食量,数组s的大小表示有多少个饼干,每个元素的大小表示每个饼干的大小 ...

  6. 122_Power Pivot&Power BI不连续日期的日环比

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 这两天有朋友在交流,dax中使用时间智能函数写日环比,一个 dateadd 就可以了.但是有些业务不是每天都连续 ...

  7. Calico网络插件

    以下大部分是本人参考各种资料{官方文档.书籍}对知识的汇总和整理,其中有理解错误的地方请大神留言和指正,嘿嘿~~ 1.概述 参考文档:https://projectcalico.docs.tigera ...

  8. 深度学习可视化工具--tensorboard的使用

    tensorboard的使用 官方文档 # writer.add_scalar() # 添加标量 """ Args: tag (string): Data identif ...

  9. CSS的几种选择器

    选择器 目录 选择器 基础选择器 标签选择器 类选择器 id选择器 通配符选择器 复合选择器 后代选择器 子选择器 并集选择器 伪类选择器 基础选择器 标签选择器 标签选择器可以把一类标签全部选择出来 ...

  10. 点亮Arduino内置的LED灯

    更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年9月3日. 15块软妹币的板子镇楼. 上一篇配置好了开发环境,然后就开始搞第一个小灯的实验了. 原理相当的简单, ...