zoukankan      html  css  js  c++  java
  • CSS 文字换行与不换行

    1. 强制不换行

    p{
        white-space:nowrap;
    }

    2. 自动换行

    p{
        word-wrap: break-word;
        word-break: normal;
    }

    3. 强制英文单词断行

    p{
        word-break:break-all; //*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。
     }

    4. CSS设置不转行:

    overflow:hidden; 隐藏
    white-space:normal; 默认
    pre; 换行和其他空白字符都将受到保护
    nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

    5. 设置强行换行:

    word-break:
    normal ; //依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
    break-all :  //该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
    keep-all :  //与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

    英文不换行

    CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果
    
    建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题
    
    以下引用word-break的说明, 注意word-break 是IE5+专有属性
    
    语法:
    
    word-break : normal | break-all | keep-all
    
    参数:
    
    normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
    break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
    keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
    说明:
    
    设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
    对于中文,应该使用break-all 。

    //单行用省略号
    .one-line {white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
    //两行省略号
    .two-line {display:-webkit-box;display:box;overflow:hidden;text-overflow:ellipsis;-webkit-word-break:break-all;word-break:break-all;
    -webkit-box-orient:vertical;box-orient:vertical;line-clamp:2;-webkit-line-clamp:2;}

    用CSS让文字在一行内显示不换行的方法
    一般的文字截断(适用于内联与块):
    .txt-overflow{
    display:block;                     /*内联对象需加*/
    80px;
    word-break:keep-all;           /* 不换行 */
    white-space:nowrap;          /* 不换行 */
    overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;         /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    }
    

      

  • 相关阅读:
    NSArray的几个方法的简单使用
    内存管理常用知识点总结
    iOS是开发之 对数组中的元素排序后输出
    iOS开发之——单例的几种设计方式
    图论二:图的存储
    图论一:基本概念
    树状数组(hdu-4325,hdu-1166,pat-1057)
    pat1079+1086+1090+1094(树的遍历)感想
    pat 甲级 1086(树的遍历||建树)
    static关键字的功能
  • 原文地址:https://www.cnblogs.com/arealy/p/7771315.html
Copyright © 2011-2022 走看看