JSFiddle - React, Tailwind, and code Playground

by sookie

HTML

<div class="box">
  <span class="inline-block-span">我是第一个</span>
  <span class="inline-block-span">我是第二个</span>
  <span >我是第三个</span>
</div>

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<div class="father">
  <span class="child">这是一段很长的文字这是一段很长的文字这是一段很长的文字</span>
</div>

CSS

.box > span {
  width: 150px;
  height: 30px;
  background-color: pink;
  margin: 3px;
}
.box > span.inline-block-span {
  display:inline-block;
}

.father {
  width: 150px;
  border: 2px solid red;
}
.child {
  display: inline-block;
  padding: 5px;
  background-color: #f0f3f9;
  white-space: nowrap;
}