zoukankan      html  css  js  c++  java
  • 当元素内文字过多时出现省略号(表格内需要加div)

    测试人员为了测试极端情况通常都会起一个很长很长很长很长很长用于测试的公司名字。每当这个时候,产品都会说那就只固定显示多少个字,其他的都点点点省略,然后鼠标浮上去出现浮层显示全部内容。一般都会写一个小黄层来装全部内容,但是如果偷懒的话也可以直接利用元素的title属性。不过还是取决于产品和设计的态度,他们不接受,还是只能乖乖的写小黄层。好吧,跑题了。。。。。。

    我当时天真的以为只要设置text-overflow属性为ellipsis就可以了。然后发现怎么都没用。。。

    1、目标元素必须有一个固定的宽。

    2、设置出现省略号,必须设置其他两个属性

    // 内容超出也不换行

    white-space: nowrap;

    // 溢出则隐藏溢出部分

    overflow: hidden;

    // 文字溢出则用省略号

    text-overflow: ellipsis;

    同时,在表格内需要实现此种效果时,

    方式一: 可在td内放一个div,然后div内放内容,样式写在div上.

    方式二:直接给定td单元格的宽度,然后注意Table要设置table-layout:fixed;保证给定的td单元格的宽是固定的,不会随内容而扩宽。

  • 相关阅读:
    高级查询及分页总结
    SQL编程
    线程同步
    创建和启动线程
    错题集04
    错题集03
    错题集02
    错题集
    新闻发布系统
    九大内置对象
  • 原文地址:https://www.cnblogs.com/coconutGirl/p/7501777.html
Copyright © 2011-2022 走看看