CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Smithy
Smithy

Reputation: 847

Overflow text into the margin with CSS

How could I prevent this text to jump into a new row and make it overflow into the margin? I've tried with text-overflow but it does not seem to work..Ideally it would appear overflowed from the left margin and disappear into the right margin. Any suggestions perhaps?

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

Upvotes: 0

Views: 1337

Answers (2)

Philip
Philip

Reputation: 3799

You probably want to add white-space: nowrap; to your CSS. I would also change your text-overflow: clip; to overflow: hidden;:

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

Here is the JSFiddle: https://jsfiddle.net/t2fh3wmo/

Upvotes: 1

Mahmod Abu Jehad
Mahmod Abu Jehad

Reputation: 177

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

Upvotes: 1

Related Questions