JSFiddle - React, Tailwind, and code Playground

by khiav223577

HTML

<div class="box single-line-center">
  <div class="multi-line-left">
    一行文字而已
  </div>
</div>
<br>

<div class="box single-line-center">
  <div class="multi-line-left">
    很長很長很長很長很長很長很長的文字
  </div>
</div>
<br>

<div class="box single-line-center">
  <div class="multi-line-left">
    很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文字
  </div>
</div>
<br>

<div class="box single-line-center">
  <pre class="multi-line-left">在 pre 內的文字</pre>
</div>
<br>

<div class="box single-line-center">
  <pre class="multi-line-left">在 pre 內很長很長很長很長很長很長很長的文字</pre>
</div>
<br>

<div class="box single-line-center">
  <pre class="multi-line-left">在 pre 內很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文字</pre>
</div>
<br>

<div class="box single-line-center">
  <pre class="multi-line-left">在 pre 內的一行文字</pre>
</div>
<br>

<div class="box single-line-center">
  <pre class="multi-line-left">在 pre 內的第一行文字
在 pre 內的第二行文字</pre>
</div>

<br>

<div class="box single-line-center">
  <pre class="multi-line-left">在 pre 內的第一行文字
在 pre 內的第二行文字
在 pre 內的第三行文字</pre>
</div>

CSS

.box {
  width: 200px;
  border: 1px solid black;
}

pre {
  margin: 0;
  word-break: break-all;
  white-space: pre-wrap;
}

.single-line-center {
  text-align: center;
}

.multi-line-left {
  display: inline-block;
  text-align: left;
}