youzhu知识点2

1 超过长度部分文字省略号显示

测试一下

<p>sla jsiij aljs ljlda jsld jdlaj sdl</p><span> sssss sss sssss ssss sss sssss sss ssssss</span><span class="china">还有一盏烛火 燃尽我 曲终人散 我看破</span>

css

p , span{display: block; width: 200px; overflow: hidden;text-overflow: ellipsis;  }

然而，效果却没有按预想中的省略了，文本只是换行并未省略显示。
经探究发现需要加上

 white-space: nowrap;

效果出来了

问候了一下这是什么属性 white-space , 处理空白区 。
white-space : normal | pre | nowrap
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

所以重点记住需要 text-overflow white-space .记住了没

那么如果想让最后一行的文字进行溢出显示呢？
大大，这么写：

.line{                width: 300px;                 display: -webkit-box;                -webkit-line-clamp: 3;                -webkit-box-orient: vertical;                 overflow: hidden;            }

其中的 -webkit-line-clamp 是用来控制第几行的 ,但是需要-webkit-box-orient:vertical 以及 display: -webkit-box 的配合使用 ,才可以达到效果。

效果如下

注意：还有两个css属性 ： word-break word-warp

对于word-warp:break-word;内容将换行显示

对于word-break:break-all;是处理单词折断的。

2 这个三角形

就是这里

不想用图片，所以用css写的三角形

.box{    width:0;    height:0;     border-right:10px solid transparent;    border-top:10px solid #fff;}

今天来分析一下为什么这样写可以实现三角形;

<div class='try'></div>

.box{ width: 30px; height: 30px;  border:20px solid  ; border-color: #204D74  saddlebrown darkblue chartreuse;      }

效果如图。注意在两条border边框线交接处，有45度的分割出现。
如果将一条边框线保持颜色，其余的边框颜色设置为透明

.try{border-color: transparent saddlebrown  transparent transparent; }

那么如果将原来的宽高设置为0，看看结果如何

变成等腰三角形啦

如果将边框的宽度变化为不同数值呢？

{bored-width:20px 60px;}

图片被拉开了。

如果咱们让两个相邻的边显示颜色

border-color: #ccc #ccc transparent transparent;

变成直角三角形啦。

所以，一个边有颜色，是等腰三角形，两个相邻边有颜色，是直角三角形

下面咱们来写几个三角效果噻

点击查看网页

原理的关键字就是“覆盖”，另外一个边框形成的尖角覆盖之前的一个，只要控制好覆盖的位置，然后就形成了实际上的不规则尖角或是尖角边框。