html - 如何防止在 div 中向下移动文本？

Question

.left {
      float: left;
      width: 75%;
      padding: 1px;
      border: 2px solid #eff0f0;
      font-weight: 450;
      font-size: 14px;
      border-right: none;
      text-align: center;  
    }

<div class="left">https://temo.derocitycapul.com/?code=1234567</div>

这是它在浏览器上的外观：

以及它在小窗口浏览器上的外观：

我的问题是如何防止将文本滑动到另一行并使 div 内的文本在任何浏览器窗口大小的单行中。

标签： htmlcss

Answer 1

white-space:nowrap应该做的伎俩。用于overflow-x:auto使其可滚动：

.left {
  float: left;
  width: 75%;
  padding: 1px;
  border: 2px solid #eff0f0;
  font-weight: 450;
  font-size: 14px;
  border-right: none;
  text-align: center;  
  white-space:nowrap;
  overflow-x:auto;
}
div{
  width:100px !important;
}

<p>With white-space:nowrap: </p><div class="left">https://temo.derocitycapul.com/?code=1234567</div><br/>
<p>Without: </p><div class="left" style="white-space:initial">https://temo.derocitycapul.com/?code=1234567</div>