Collection of commonly used CSS code snippets

css text is too long, showing ellipsis

single line text

 overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

multiline text

 display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 设置需要显示的行数
overflow: hidden;

Use flex layout to achieve css beyond sliding, the code is very concise

 .list{
    display: flex;
    overflow-x: auto;
}

.item{
    flex-shrink: 0;
}

<div class="list">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

The problem that the text overflow does not work

If the following css does not take effect, you only need to add a width:0 to main to solve the problem

 <div className="box">
  <div className="aside">aside</div>
  <div className="main">main</div>
</div>

.box{
    display: flex;
    justify-content: space-between;
}

.aside{
  flex-shrink: 0;
}

.main{
    flex: 1;
}

// 如果给title元素加上文本省略的css，也会出现这种情况，所以同理，给main元素加上width:0，也能解决
<div className="box">
  <div className="left">left</div>
  <div className="main">
    <div className="title">超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本
    </title>
  </div>
  <div className="right">right</div>
</div>

Complete example

Sitting on the flex layout

 display: flex;
  justify-content: space-between;

desired effect

actual effect

The solution is to put a transparent placeholder at the back