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

一、总结

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

1、word-break和word-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单词折行

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         div{

             width:500px;

             height:300px;

             background: #ccc;

             /*word-break:break-all;*/

             word-wrap:break-word;

         }

     </style>

 </head>

 <body>

     <div>

         <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

         <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>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

     </div>

 </body>

 </html>
 

css3-11 如何让html中的不规则单词折行的更多相关文章

  1. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  2. span 右浮动折行 解决ie6/7中span右浮动折行问题

    RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...

  3. ie6/7/8中span右浮动折行问题的解决方案

    浮动标准: W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释.以下是关键段落: A floated box is shifted to the left or ri ...

  4. 借助CAD在Altium Designer中定义不规则PCB外形

    借助绘图软件CAD在Altium Designer中定义不规则PCB外形. 工具/原料 CAD2007 Altium Designer2015 方法/步骤 借助CAD绘制的不规则外形,保存成DXF格式 ...

  5. 《python解释器源码剖析》第11章--python虚拟机中的控制流

    11.0 序 在上一章中,我们剖析了python虚拟机中的一般表达式的实现.在剖析一遍表达式是我们的流程都是从上往下顺序执行的,在执行的过程中没有任何变化.但是显然这是不够的,因为怎么能没有流程控制呢 ...

  6. 第11.20节 Python 中正则表达式的扩展功能：后视断言、后视取反

    一. 引言 在<第11.19节 Python 中正则表达式的扩展功能:前视断言和前视取反>中老猿介绍了前视断言和前视取反,与二者对应的还有后视断言和后视取反. 二. (?<=-)后视 ...

  7. SQL-61 对于employees表中，给出奇数行的first_name

    题目描述 对于employees表中,给出奇数行的first_nameCREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` ...

  8. 使用strtok_s函数从一个字符串中分离出单词

    下面的代码从含有多个结束符的字符串中分离出单词来,需要对strtok_s有清楚的认识.这段代码是我在写一个处理文件中单词个数时用来分离读取到的字符串中的单词时写的,亲测可用~ 1 2 3 4 5 6 ...

  9. 三分钟入门 InnoDB 存储引擎中的表锁和行锁

    各位对 "锁" 这个概念应该都不是很陌生吧,Java 语言中就提供了两种锁:内置的 synchronized 锁和 Lock 接口,使用锁的目的就是管理对共享资源的并发访问,保证数 ...

随机推荐

  1. batch---系统不繁忙时执行任务

    batch:不需要指定时间,自动在系统空闲的时候执行指定的任务 [root@xiaolizi ~]# batch at> echo 1234at> <EOT>job 5 at ...

  2. sleep---暂停指定的时间

    sleep命令可以用来将目前动作延迟一段时间. 使用权限:所有使用者. 语法 sleep [--help] [--version] number[smhd] 参数说明: --help : 显示辅助讯息 ...

  3. 【2017 Multi-University Training Contest - Team 5】Rikka with Graph

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6090 [Description] 给你n个点; 让你在这n个点上最多连m条无向边; 使得 ∑ni= ...

  4. Word Ladder II [leetcode]

    本题有几个注意点: 1. 回溯找路径时.依据路径的最大长度控制回溯深度 2. BFS时,在找到end单词后,给当前层做标记find=true,遍历完当前层后结束.不须要遍历下一层了. 3. 能够将字典 ...

  5. 洛谷——P1316 丢瓶盖

    https://www.luogu.org/problem/show?pid=1316 题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想 ...

  6. javascript进阶教程第二章对象案例实战

    javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...

  7. 119.WIN32窗口原理

    #include <Windows.h> //处理消息的回调函数 LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM); int WIN ...

  8. ORACLE使用WITH AS和HINT MATERIALIZE优化SQL解决FILTER效率低下

     在做项目的过程中,一个页面使用类似例如以下的SQL查询数据.为了保密和使用方便,我把项目中有关的表名和字段替换使用ORACLE数据库中的系统表和字段. 在我所做的项目中.类似ALL_TABLES ...

  9. 下次自己主动登录（记住password）功能

    1:进入cookie插件 <script src="jquery.cookie.js" type="text/javascript"></sc ...

  10. LeetCode_Construct Binary Tree from Preorder and Inorder Traversal

    一.题目 Construct Binary Tree from Preorder and Inorder Traversal My Submissions Given preorder and ino ...