[英]Overflow text into the margin with CSS
如何防止此文本跳到新行並溢出到頁邊距? 我嘗試了文本溢出,但是它似乎不起作用。理想情況下,它會從左邊距溢出並消失到右邊距。 有什么建議嗎?
.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>
<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>
您可能要添加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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.