【前端中css基础——系列6】单行多行文本截断；实现三角形圆形

系列文章总结

【前端中css基础——系列1】盒模型与flex布局
【前端中css基础——系列2】css中浮动与垂直居中显示
【前端中css基础——系列3】css中模块化；css动画；css单位
【前端中css基础——系列4】css实现固定宽高比；css中伪元素
【前端中css基础——系列5】BFC与IFC；绝对定位与相对定位和固定位置
【前端中css基础——系列6】单行多行文本截断；实现三角形圆形

---

---

一、单行多行文本截断

有时候文本太长需要进行限制长度，并且在限制了长度后面加上省略号。

如图所示：

---

1.1 单行文本截断

文本溢出经常用到的就是text-overflow：elipsis，只需要短短几行就能够实现：

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

1.2 多行文本截断

对于多行文本截断一般使用：-webkit-line-clamp：来实现，其后的系数表示截断到第几行。

div{
display：-webkit-box；
overflow：hidden；
-webkit-line-clamp：2；
-webkit-box-orient:vertical;
}

• disaply:-webkit-box:必须结合的属性，将对象作为弹性伸缩盒子模型来显示。
• -webkit-box-orinet；必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
• text-overflow：elipsis；可选属性，可以用来多行文本的情况下，用省略号’…‘隐藏超出的部分。

---

二、css实现一个三角形和圆形

2.1 css实现一个三角形

使用border边框来实现（因为border的边框是由三角形组成的）：

操作流程如下：

1. 创建一个带边框的div
2. 将内部div宽高设置为0
3. 将其他三个边框取消掉
4. 利用更改border的边框，可以随意控制写出想要的三角形，通过控制边框的大小来实现三角形的大小，改变三角形的位置。

width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;

---

2.2 css实现一个圆形

思路是使用一个正方形，然后将其圆角50%。

代码如下：

div{
width：200px；
height：200px；
border-radius：50%；
background-color：red；
}

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~