<!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. 自增特性，外键，级联更新与级联删除，表间关系，SELECT用法，GROUP BY

    自增特性 自动增长的作用: 问题:为数据表设置主键约束后,每次插入记录时,如果插入的值已经存在,会插入失败. 如何解决:为主键生成自动增长的值. 自动增长的语法: 字段名 数据类型 AUTO_INCR ...

  2. SSH管理多密钥

    生成密钥对 ssh-keygen -t rsa -b 4096 -C "your_email@example.com" # 默认情况下在~/.ssh目录下生成id_rsa和id_r ...

  3. vue设计模式

    vm 的设计模式. mvvm 是 model-view-viewModel 的简写. model 是数据模块,view 是渲染视图,viewModel 是沟通视图和数据模块的桥梁. vue 中使用了哪 ...

  4. Spring大事务到底如何优化？

    所谓的大事务就是耗时比较长的事务. Spring有两种方式实现事务,分别是编程式和声明式两种. 不手动开启事务,mysql 默认自动提交事务,一条语句执行完自动提交. 一.大事务产生的原因 操作的数据 ...

  5. 【Unity Shader学习笔记】Unity光照基础-漫反射光照

    本代码只适用于平行光. 1.逐顶点漫反射光照 1.1漫反射光照原理 1.2代码实现 在Properties语义块中声明一个漫反射颜色属性 Properties { //漫反射参数,用于调整漫反射效果 ...

  6. 《Unix 网络编程》11：名字和地址转换

    名字和地址转换 系列文章导航:<Unix 网络编程>笔记 域名系统 简介 域名系统主要用于主机名字和 IP 地址之间的映射.主机名可以是: 简单名字,如:centos01 全限定域名(FQ ...

  7. LoRa和NB-IoT会长期共存吗？

    物联网有很多无线通信技术,主要是Zigbee,WiFi,蓝牙和Z-wave等短距离通信技术,另一种是LPWAN.LPWAN的两种类型之一在未授权的频谱上工作.另一种是2G/3G/4G蜂窝通信技术,该技 ...

  8. LVGL库入门教程02-基本控件与交互

    LVGL 本质上是一个 GUI 库,它包含大量的控件(widget),即按钮.标签.滑块.菜单栏这种具有一定人机交互特征的组合图形.LVGL 在设计时,采用了一定面向对象编程的设计思路,有效降低了代码 ...

  9. Node.js amqplib 连接 Rabbitmq 学习笔记

    var amqp = require('amqplib'); connect([url, [socketOptions]]) var amqp = require('amqplib/callback_ ...

  10. python 基础知识-day6(内置函数)

    1.sorted():用于字典的排序 dict1={"name":"cch","age":"3","sex&q ...