尚硅谷前端基础 (83)

好，那除了这个水平和垂直对齐以外呢，我们还有两个文本样式，我们再说一下啊，来新建一个文件，我们来一个零八，还是我们这个文本的样式，文本的样式呢，之前我演示过这个东西啊，改个名啊，我们写扩展名，HTML什么东西呢？写一个页面，然后运行起来。写一段字吧，呃，写个div div里边呢，我们LM啊，嗯，给他来个。哎，这不用写这么多是吧，这就写一个今天天气真不错，给来个class啊，到时我们好区分下，我们这来一个BOXS1，写个样式啊，我们style标签，Style标签呢，这我们直接点一个BOX1，点一个BOX1的话，我们这里边字稍微大一点啊，Size size我直接给他来一个这个50像素啊，它稍微大一点，哎，我们之前提到过一个问题，对吧，提到过一个东西，我们就是AA标签，写完了以后默认都是自带这个下划线的，哎，我们之前说我怎么去除这个下划线，我们用的是一个叫做一个text啊，Text这个叫什么呢？这个叫我们的文本修饰。

哎，设置什么呢？哎，设置我们那个文本修饰，那比如说我们可以选的值就是有一个叫做underline underline叫什么呢？叫下划线，你看下边是不是就会出现一条线，哎，出现一条线啊，所以这个啊，我们来说一下可选值，可选值第一个值我们有一个nu啊none，它应该一般都是默认值，就是什么都没有啊，什么都没有，然后还有什么呢？Underline，这叫做一个下划线啊，下划线还有一个我们叫做什么叫做upperline。我们有阿兰。Underline top。

呃，烂肉是吧，烂肉，这烂through，这是一个什么呀，这是一个删除线啊，这是一个删除线，就是从那个中间穿过去了，我们叫一个删除线啊，不叫那个upper，叫做overland overland叫做什么呢？上划线，就算是overline overline，这叫做一个上划线，这个线出现在这个上边啊，常见的就这么几种啊，所以这东西也没啥可说的，就是比较常见的啊上划线，上划线这个东西呢，也基本上就是我们的这个所有浏览器都支持，你打开IE的话也是没问题的，CTRLC。但是为什么要特地要说一下IE呢？因为这里边啊，现在这个不一样是因为他们字体不一样啊，你们个效果一样，你可以统一下字体放到family，放到family，我们来一个微软雅黑，微软雅黑啊它自己一样，那效果就一样了，对吧？那这个时候我们要说一下什么问题呢？为什么要特意说一下IE，因为在我们这个啊，它会有一个新的新的设置方式啊，新的设置方式嗯，它会有点不太一样，我们直接写一个orration，我们拿下划线举例子，下划线是一个underline，那之前的话我们只能指定这个下划线，那就是它什么颜色，就跟它就跟字体一样，字体是黑色它就是黑色，字体是黄色它就是黄色，那这里面现在我们还可以指定颜色，比如说我希望是一个红色下划线，我就可以underline加一个right啊，就变成了一个红色下划线，但是这个东西在IE里它不支持啊，不支持在Chrome里啊，在火狐里都可以用，但是在IE里不支持，我们就说一下这个问题，火狐呢，我们也打开一个。

哎，火狐你看，哎，你都打开都给它摆着。IE呢，摆着。

哎，如火。火狐呢，跟我们的Chrome它都是支持这个颜色的，对吧，但是IE不支持，不仅可以支持颜色，你甚至可以指定什么呀，指定这个样子就有点像我们那个什么了，有点像我们那个边框啊，有点像边框了，可以指定颜色，还有样式，但是你了解一下，它属于一个新的语法，IE不支持，所以你要兼容IE的话，这种写法就不行了啊，不兼容那就可以这么写啊，可以这么写好，这个是我们说的一个taxre，我们叫做一个文本修饰，那除了文本修饰以外呢，我们还有一个东西啊，这里边我们写一个box div，我们写一个点一个box，点一个box呢，我里边可能会写一些内容啊，写一些内容，当然这个内容还还挺多的，那有的时候我们看到的是一个什么效果，比如说京东举例的。

香港香港的香港，哎呀，香港这看不见呀，3W点京东点。com。HTTPS冒号块块推车。这个比较缺德是吧，我们来看看他这有没有吧。好，切换到我们这个中文的主站啊，我们来看一下啊，这里边在这儿，你看这我们这儿它这有一个列表，列表这写着写写这玩意儿，写这玩意儿，写这玩意是吧？写这玩意儿，然后最后发现你干嘛呢？它这里面会显示一个三个点，是不是会在这儿，是不是显示了一个省略号啊，哎，为什么显示省略号，那就是因为这儿这个内容它太多了，太多了显示不全，所以告诉你省略号这内容还没显示全，你要想看全了怎么办呢？诶你再点进来再去看，对吧？点进来去看就行了，那这个效果在我们网页里，我们要怎么去做。

我们直接来说一下，呃，那像这种东西，现在比如说我这个BOX2里边内容是不是就比较多呀，哎内容就比较多，那比如说我希望它可能就显示这么多内容，多出去内容就显示这个省略号，那这个时候我们怎么办啊，我们要怎么办？来看一下我们在这儿直接点一个BOX2 box2呢，首先呢，我们来先说一个属性，叫做一个white space啊white space white space叫什么呢？诶叫空白区域啊叫空白区域这是什么意思呢？诶外就是白的嘛，Space就是空格啊空格，那这个wide space是什么呢？它用来设置，设置我们这个页面中啊，设置我们这个网页如何什么呢？诶如何处理我们这个换行啊，如何处理我们这个空白啊，如何处理我们这个空白，那现在这情况，你看像这种空白就是它就会自动换行啊，它会自动换行，那你就说默认值呢，它叫做一个rap啊。

这边是啥叫做一个这个默认值啊，默认值应该叫做normal，就是正常情况，哎，空白你就该怎么显示就怎么显示就完事了啊，这是我们正常情况，那我们说了，我们说一下可选值，可选值我们叫做一个normal。Normal就是正常情况啊，它是一个默认值，然后还有什么值呢？还有我们刚才看到一个叫做no rap no rap什么效果，哎，No rap就是不换。哎，不换行，也就是说你这个空白再多没关系，我不换行，我是不是顺着往下显示啊，那这样就会导致我这个横向是不是出现这个滚动条啊，哎，滚动条no rap不换行还有什么呢？还有一个我们可能会用到的叫做一个这个pre啊，叫做一个pre普叫什么呢？哎，Pre叫保留，保留我们这个空白啊，保留我们这个空白什么意思，我们之前说过啊，我们之前说过，在我们的网页里边，我们的一个我们的多个空格和换行，它会被解析成什么呢？会被解析成一个空格啊，会被解析成一个空格，但是我们如果把这个wide space设成pre以后，它会干嘛呢？它会保留我们这个里他边的格式，换句话说，你看啊，我这里边怎么写，他那就怎么显示，我所有的空白它都会给我干嘛呢？给我保留啊pray，它可以给我预处理这个格式啊，保留我们这个文本的你所写的格式，你写的是什么呀，在这里它就给你显示什么呀。

这个意思啊，这么一个意思，Pre啊这么三个值，那我如果想实现那个省略号的效果，我这必须得是写一个no rap啊，写一个no rap啊不换行，那现在是不就一行显示啊，诶因为你要是换行以后，你省略号就没有意义了，对吧？所以你写省略号一定支持一行的，就是不换行嘛，啊就是不换行，然后呢，我们还要设置一个，我们叫做一个overflow，诶overflow hidden啊overflow hidden什么意思呢？你要把多余的内容给它裁剪掉啊，多余的内容给它裁剪掉，但是现在没用，因为你现在你的BOX2，你是不是没有给它固定宽度，哎固定宽度，所以我们再给BOX2指定一个宽度，Y来一个200，你如果限制你宽度就是200，所以这个时候多余的内容是不是就被裁掉了，诶被裁掉这么一效果，当然你要你要没写这个，你要没写这个，它就干嘛就往下走了，所以你这个不换行一定要写上啊，No rap不换行，然后overflow ahead裁剪是就裁掉了，哎，但是你后边不还是想要显示省略号吗？怎么显示省。

二哎，显示省略号，我们还有一个叫做tax的overflow文本的一个溢出啊，Tax overflow我们也可以设置一个叫什么这个值啊，这个值，这个值叫EL piece是吧？L piece应该是么？我不不太会读这个词啊，大概意思就是省略号，这表示什么意思呢？就表示我们这个溢出的内容设置一个什么呀，省略号，所以这时候后边是不是多了一个省略号就显示了啊，那这样就实现这么一个效果了，所以这几个结合起来一块儿就可以对我们这个溢出的内容显示省略号，一定注意啊，这几个值缺一不可，Y表示我们这个宽度，White space设置换不换行的，Overflow设置裁不裁剪的，然后这个设置显示省略号的，如果你不写，你少一个，少一个也不行啊，少一个不行，这怎么读，我们查一下啊。

直接百度一下。E e eclsis是吧，等于是e eclsis就表示的是一个省略号的意思啊，省略号的意思好，那关于文本的一些这个样式的话，我就先说这么多了，当然文本相关的样式也是还有很多，但是我们真的在这儿一个一个去过的话，实在是太没有意思了啊，你看带太子的一堆啊，一堆一堆的一个一个过，太没有意思了，所以我们现在先说这么多，然后的话我们随时用，用到的随着我们再去说，但是我给你说的这些基本上都是最常用的了，那些都用的没有那么的多，随时用我们随时再说，当然可能还有一些我们暂时也用不到，用不到可能你工作的时候也就用不到了，但是你说老师你不说以后我工作的时候要遇到这些问题怎么办？哎，我不可能把所有东西都给你讲了，那是不可能的，对吧，所以你工作的时候一定要注意，不是给你文档了吗？需要什么去文档里。

找找或者上百度搜搜是不是都行了，哎，我们不可能都讲全了，都讲全了你也不愿意听我讲着也费劲，对吧，所以这个时候我们就说一些我们比较常用的这些文本的样式啊好，那关于文本还有字体，我们就先暂时告一段落，停一下。