使用CSS将文字溢出到页边距

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/