zoukankan      html  css  js  c++  java
  • CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块):

    .text-overflow {
        display:block;/*内联对象需加 */
        width:31em;/* 何问起 hovertree.com */
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    }

    对于表格文字溢出的定义:

    对于表格超出范围显示省略号

     1 table{
     2     width:30em;
     3     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
     4 }
     5 /*
     6 何问起
     7 hovertree.com
     8 */
     9 td{
    10     width:100%;
    11     word-break:keep-all;/* 不换行 */
    12     white-space:nowrap;/* 不换行 */
    13     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    14     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    15 }

    需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,

    其它的浏览器文本超出指定宽度时会隐藏。

    特效:http://www.cnblogs.com/roucheng/p/texiao.html

  • 相关阅读:
    Hadoop2.8.2 运行wordcount
    RHEL7.2 安装Hadoop-2.8.2
    RHEL7.2 SSH无密码登录非root用户
    python day 1 homework 2
    python day 1 homework 1
    python三种格式化输出
    windwos 10 安装flask
    ubunit 16 安装pip
    Axure 8 Tab制作
    JavaScript平台Platypi悄然登场
  • 原文地址:https://www.cnblogs.com/roucheng/p/cssjieduan.html
Copyright © 2011-2022 走看看