Question

如何阻止此文本跳转到新行并使其溢出到边距？我尝试过文本溢出但它似乎没有工作......理想情况下它会从左边缘溢出并消失在右边缘。或许有任何建议吗？

.section-overflow {
  background-color: green;
  font-size: 2rem;
  text-overflow: clip;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="section">
      <p class="section-overflow">Lorem - Ipsum Lorem - Dorem - Lorem Ipsum - Lorem Dorem Ipsum - Lorem - Dorem - Lorem Ipsum </p>
    </div>
  </div>
</div>

Answer 1

<div style="overflow:auto;">
<div class="container">
  <div class="row">
    <div class="section">
      <p class="section-overflow">Lorem - Ipsum Lorem - Dorem - Lorem Ipsum - Lorem Dorem Ipsum - Lorem - Dorem - Lorem Ipsum </p>
    </div>
  </div>
</div>

</div>

Answer 2

您可能希望将white-space: nowrap;添加到CSS中。我还会将您的text-overflow: clip;更改为overflow: hidden;：

.section-overflow {
  background-color: green;
  font-size: 2rem;
  overflow: hidden;
  white-space: nowrap;
}

这是JSFiddle：https://jsfiddle.net/t2fh3wmo/

使用CSS将文本溢出到边距中

2 个答案: