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

あなたはおそらくあなたのCSSにwhite-space: nowrap;を追加したいです。 https://jsfiddle.net/t2fh3wmo/それだ

Answer 2

<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>