CSS学习(十二)-文本换行符

一、理论:

1.word-wrap:

a.normal 在半角空格或连字符的地方进行换行

b.break-word 不截断英文单词换行

2.word-break:

a.normal 中文到边界上的汉字换行,英文从整个单词换行

b.break-all 强行截断英文单词换行

c.keep-all 不允许字断开

3.while-space:

a.normal 默认值

b.pre 文本空白处会被浏览器扣留

c.nowrap 文本会在同行上直到遇到换行符

d.pre-line 合并空白符序列,保留换行符

e.pre-wrap 保留空白符序列,正常进行换行

f.inherit 继承父元素的while-space属性

二、实践:

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #test1 div {
            background:#a6f5f3;
            float:left;
            width:150px;
            margin:10px;
            font-size:16px;
            font-family:simsun;
            border:1px solid #ccc;
        }
        #test2 div {
            background: #932983;
            float:left;
            width:150px;
            margin:10px;
            font-size:16px;
            font-family:simsun;
            border:1px solid #ccc;
            word-wrap:break-word;
        }
        #test3 div {
            background: #9eaab6;
            float:left;
            width:150px;
            margin:10px;
            font-size:16px;
            font-family:simsun;
            border:1px solid #ccc;
            word-break: normal;
        }
        #test4 div {
            background: #2288dd;
            float:left;
            width:150px;
            margin:10px;
            font-size:16px;
            font-family:simsun;
            border:1px solid #ccc;
            word-break: break-all;
        }
        #test5 div {
            background: #298319;
            float:left;
            width:150px;
            margin:10px;
            font-size:16px;
            font-family:simsun;
            border:1px solid #ccc;
            word-break: keep-all;
        }
    </style>
</head>
<body>
<div id = "test1">
    <div>
        我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行
    </div>
    <div>
        下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。
    </div>
    <div>
        I'm a chihuo.love eating~
    </div>
</div>

<div id = "test2">
    <div>
        我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行
    </div>
    <div>
        下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。
    </div>
    <div>
        I'm a chihuo.love eating~
    </div>
</div>

<div id = "test3">
    <div>
        我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行
    </div>
    <div>
        下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。
    </div>
    <div>
        I'm a chihuo.love eating~
    </div>
</div>

<div id = "test4">
    <div>
        我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行
    </div>
    <div>
        下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。
    </div>
    <div>
        I'm a chihuo.love eating~
    </div>
</div>

<div id = "test5">
    <div>
        我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行
    </div>
    <div>
        下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。
    </div>
    <div>
        I'm a chihuo.love eating~
    </div>
</div>

</body>
</html>
时间: 2024-10-14 13:04:00

CSS学习(十二)-文本换行符的相关文章

CSS学习笔记:文本换行显示(word-wrap)

在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. 换行技术比较分析 IE定义了多个换行处理属性:line-break.word-break.word-wrap,另外CSS1定义了white-space,CSS3增加了word-wrap. line-break专门负责控制日文换行. word-wrap属性可以控制换行.当属性值取word-wrap时,

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

springMVC3学习(十二)--文件上传优化CommonsMultipartResolver

基于上一篇文件上传发现效率很慢,我们应该对它进行优化  使用springMVC对文件上传的解析器 来处理文件上传的时候需要在spring的applicationContext里面加上springMVC提供的MultipartResolver的申明 这样客户端请求的时候 springMVC会检查request里面是否包含多媒体信息 如果包含了就会使用MultipartResolver进行解析, springMVC会使用一个支持文件  处理的MultipartHttpServletRequest来包

SpringMVC学习(十二)——SpringMVC中的拦截器

SpringMVC学习(十二)--SpringMVC中的拦截器 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.本文主要总结一下SpringMVC中拦截器是如何定义的,以及测试拦截器的执行情况和使用方法. SpringMVC中拦截器的定义和配置 SpringMVC中拦截器的定义 在SpringMVC中,定义拦截器要实现HandlerInterceptor接口,并实现该接口中提供的三个方法,如下: public class Inter

Python——处理文本换行符

源文件每行后面都有回车,所以用下面输出时,中间会多了一行 try: with open("F:\\hjt.txt" ) as f : for line in f: print(line) except FileNotFoundError: print("读取文件出错") 有两种方法处理: 1.print后面带 end='',表示不换行 try: with open("F:\\hjt.txt" ) as f : for line in f: pri

CSS基础学习十二:CSS样式

CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表,CSS表格,CSS轮廓等样式.我们就目前用到的 CSS样式简单地介绍一下. 下面只是总结性的一些东西,具体的可以参考:CSS样式教程 (1)背景色 background-color 设置背景颜色 可能的值: 颜色名称:如red,yellow,blue 十六进制颜色值:如#ffffff rgb颜色值:如rgb(255,255,255(十六进制为ff)) transparent:默认的,背景颜色透明 inherit:继承父元素的背景色

CSS学习(二十)-flexbox模型

一.理论: 1.混合版本flexbox模型 a.display 1)flexbox 设置元素为块级容器 2)inline-flexbox 设置元素为内联块伸缩容器 b.display容器的基本使用 1)主要用于IE10浏览器 2.伸缩流方向flex-direction a.flex-direction 1)row ltr-->自左向右排列,rtl-->自右向左排列 2)row-reverse ltr-->自右向左排列,rtl-->自左向右排列 3)column 按出现顺序从上到下排

css学习笔记二

2015年7月12日一.absolute1.注释符有去空格效果2.absolute有跟随性,最佳定位效果3.图片居中效果--在父元素里设置absolute,test-align:center 图片前用一个 空字符串然后图片<img src=""/>4.absolute不占空间,不影响页面布局5.absolute时z-index不起作用6.top ,bottom,left,right有拉伸作用IE7+可以替代width/height,内部元素可以自动拉伸.7.比较 正常情况下

CSS学习(二十一)-flexbox模型之二

一.理论: 1.flex-flow a.flex-direction 设置伸缩容器的伸缩流方向 b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时,伸缩项目在伸缩容器中是否换行排列 2.flex-pack a.具有与box-pack属性相同的参数 b.distribute 伸缩项目会平均分布在同一行里 c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容器的主轴起始:下一个伸缩项目的起始边缘与第一个伸缩项目的末尾边缘紧挨在一起,其他伸缩项目依次沿着主轴依次排列.伸缩