CSS 三角形 单行文字长度 多行文字长度

三角形

/*向上*/

.triangle_border_up{

     width:0;

     height:0;

     border-width:0 30px 30px;

     border-style:solid;

     border-color:transparent transparent #333;/*透明 透明  灰*/

     margin:40px auto;

     position:relative;

}

/*向下*/

.triangle_border_down{

     width:0;

     height:0;

     border-width:30px 30px 0;

     border-style:solid;

     border-color:#333 transparent transparent;/*灰 透明 透明 */

     margin:40px auto;

     position:relative;

}

/*向左*/

.triangle_border_left{

     width:0;

     height:0;

     border-width:30px 30px 30px 0;

     border-style:solid;

     border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */

     margin:40px auto;

     position:relative;

}

/*向右*/

.triangle_border_right{

     width:0;

     height:0;

     border-width:30px 0 30px 30px;

     border-style:solid;

     border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/

     margin:40px auto;

     position:relative;

}




单行文字长度

.short1{
 
 width:100px;
 white-space:nowrap;
 word-break:keep-all;
 overflow:hidden;
 text-overflow:ellipsis;
}

多行文字长度

display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
-webkit-box-orient  /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

文字的分割线效果

<div class="box">

  <span class="line"></span>

  <span class="text">我的文字</span>

  <span class="line"></span>

</div>

.box {

  height: 40px;

  width: 300px;

  background-color: wheat;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.line {

  height: 2px;

  flex-grow: 1;

  background-color: red;

}

.text {

  margin: 0 5px;

}