JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div class="section">
  <span>不折行，溢出显示。</span>dfasdfsfdfsdfddfssdfsdfsdfsdfsdfsdfsdafasdfadsffsdfsd
</div>

<div class="section scroll">
  <span>不折行，溢出滚动。</span>dfasdfsfdfsdfddfssdfsdfsdfsdfsdfsdfsdafasdfadsffsdfsd
</div>

<div class="section">
  <span>有空格，折行，以 word 为单元。</span>
  dfas dfsf dfsdf ddfs sdfs dfsdf sdfsd fsdf sdafasdf asdfsddsffsdfsd
</div>

<div class="section nowrap">
  <span>有空格，强制不折行</span>
  dfas dfsf dfsdf ddfs sdfs dfsdf sdfsd fsdf sdafasdf asdfsddsffsdfsd
</div>

<div class="section scroll nowrap">
  <span>块元素，强制不折行，水平滚动。</span>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="section"></div>

<div class="section"></div>

SCSS

.section{
  background-color:#CCC;
  width:300px;
  margin-bottom: 6px;
  padding: 4px;
  position:relative;
  padding-top: 20px;
  span{
    position: absolute;
    top:0;
    font-size:14px;
    color:#00f;
  }
  &.scroll{
    overflow:auto;
  }
  &.nowrap{
    white-space: nowrap;
  }
  .item{
    display:inline-block;
    width:60px;
    background-color:#CFC;
    height:60px;
  }
  &:empty{
    display:none;
  }
}