zoukankan      html  css  js  c++  java
  • css3-11 如何让html中的不规则单词折行

    css3-11 如何让html中的不规则单词折行

    一、总结

    一句话总结:用word-wrap属性:word-wrap:break-word;

    1、word-breakword-wrap的区别?

    推荐word-wrap

    word-break:所有单词只要范围不够一律折行

    word-wrap:不规则单词折行,规则单词不折行

    不好记得话看各自的属性值就知道了

    15             /*word-break:break-all;*/
    16             word-wrap:break-word;

    2、word-break和word-wrap的属性值分别是什么?

    break-all   和 break-word   其实属性值和功能是一一对应的

    15             /*word-break:break-all;*/
    16             word-wrap:break-word;

    二、如何让html中的不规则单词折行

    1、相关知识

    word-wrap
    word-wrap:break-word;

    2、代码

    word-wrap单词折行

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10         
    11         div{
    12             width:500px;
    13             height:300px;
    14             background: #ccc;
    15             /*word-break:break-all;*/
    16             word-wrap:break-word;
    17         }    
    18     </style>
    19 </head>
    20 <body>
    21     <div>
    22         <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    23         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
    24         <p>linux is very much!</p>
    25         <p>linux is very much!</p>
    26         <p>linux is very much!</p>
    27     </div>
    28 </body>
    29 </html>
     
  • 相关阅读:
    python---装饰器用法小结
    python---mysql事务
    python---sql语句集体更改数据
    python多继承中的深度优先与广度优先
    python---copy
    vue 主次页面区分
    css 过渡动画
    android web外壳
    cordova 打包 守护进程无法启动
    JavaScript 原生控制元素添加删除
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9262627.html
Copyright © 2011-2022 走看看