zoukankan      html  css  js  c++  java
  • html/css实现文字自动换行,超出部分出现(...)

    PS:这是我在别人博客copy下来的

    做前端的我们都会发现这样一个问题,当你控制文字出现多行时,而这多行是有限制的(比如超出部分隐藏不显示),而这多行文字如果全部是数字或者字母抑或是数字和字母的组合时,你会发现这些文字不会自动换行,如果控制的不对,它有可能冲出父元素…

    原因是: 
      英书字母之间如果没有空格,系统以为是一个单词,就不会BUTO换行。汉字就没有这种情况。

    • 一行文字

              当有一行文字的时候,如果想让超出部分出现(…),可以这样写:

               .wrap{

                      overflow: hidden;

                      text-overflow: ellipsis;

                      white-space: nowrap;

                       118px;

                }

    • 多行文字 

             当有多行文字的时候,可以这样写:

            .wrap{

                 220px;

                 height: 72px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                word-break: break-all;

            }

  • 相关阅读:
    cf B. Sereja and Suffixes
    cf E. Dima and Magic Guitar
    cf D. Dima and Trap Graph
    cf C. Dima and Salad
    最短路径问题(floyd)
    Drainage Ditches(网络流(EK算法))
    图结构练习—BFSDFS—判断可达性(BFS)
    Sorting It All Out(拓扑排序)
    Power Network(最大流(EK算法))
    Labeling Balls(拓扑)
  • 原文地址:https://www.cnblogs.com/Alexin/p/3582240.html
Copyright © 2011-2022 走看看