zoukankan      html  css  js  c++  java
  • CSS自动换行、强制不换行、强制断行、超出显示省略号

    一、P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果

            但是对于一串的数字或者单词却不具有这样的格式优势

    二、各种方式 

      强制不换行:p { white-space:nowrap; }

      自动换行:p { word-wrap:break-word; }

      强制英文单词断行:p { word-break:break-all; }

      *注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。

      超出显示省略号:p{text-overflow:ellipsis;overflow:hidden;}

      1、white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

        white-space 属性设置如何处理元素内的空白 
          normal 默认。空白会被浏览器忽略。 
          pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 
          nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。 
          pre-wrap 保留空白符序列,但是正常地进行换行。 
          pre-line 合并空白符序列,但是保留换行符。 
          inherit 规定应该从父元素继承 white-space 属性的值。

       2、word-wrap: normal|break-word;

          word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 
            normal: 只在允许的断字点换行(浏览器保持默认处理) 
            break-word:在长单词或URL地址内部进行换行

       3、word-break: normal|break-all|keep-all;

        word-break 属性用来标明怎么样进行单词内的断句。 
          normal:使用浏览器默认的换行规则。 
          break-all:允许再单词内换行 
          keep-all:只能在半角空格或连字符处换行

  • 相关阅读:
    【转载】利用一个堆溢出漏洞实现 VMware 虚拟机逃逸
    metasploit(MSF)终端命令大全
    Linux怎么开启ssh
    Day5_模块与包(import)(form......import....)
    Day5_递归_二分法
    Day5_协程函数_面向过程
    Day4_生成器_三元表达式_列表解析_生成器表达式
    Day4_迭代器
    openssh升级的坑爹之路
    Day4_装饰器
  • 原文地址:https://www.cnblogs.com/dhrwawa/p/10511518.html
Copyright © 2011-2022 走看看