How to Stop Text from Taking Up More Than 1 Line

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>testing quite a lot of text that just doesn't wrap because it is too long a run-on sentance with so many useless words for you to not read today despite every effort you make to do so including stretching your browser width to the maximum length unless however you utilized your browser's zooming out feature or manually modifying the CSS in which case you are definitely cheating and ruining this fun little game of me typing out as many words as can be fitted into one ridiculously long run-on sentence of the twenty-first century anno domini using my traditional keyboard and two monitors at 1080p while going through every effort to painstakingly ramble on and on but just not exactly repeating myself short of reusing a couple of words in multiple places throughout this HTML even though that would be about a thousand times easier than what I'm currently doing on this day to pointlessly avoid work regardless of its futility given that it'll only create consequences for myself in having to work harder to catch up later of course all of that notwithstanding moderation efforts to tone back my extensive efforts to make this somewhat enjoyable to read while making it as long as possible who may or may not revert this edit in spite of its usefulness since the previous edit only contained four words that could not possibly wrap even without the CSS changes due to their short nature which is invariably going to create more questions than it answers such as can be found in the comments section which is exactly why I created this effort in order to address one of those about the purpose of the overflow attribute which if you have modified you will now see lets you read the entirety of this text through the benefits of horizontal scrolling features but on the other hand if only overflow was used and text-wrap was left out then you will continue to see a vertical scrollbar unless you set a fixed height for this div in which case you certainly should see that vertical overflow is hidden though that would only happen if you did not put this example into fullscreen short of having your viewport set to a small enough height which can actually be further defined to a designated number of lines as opposed to one by using a height set to a multiple of the CSS property defined by line-height which could be a percentage of white-space and that would indeed hide the vertical overflow of this mountain of text which I'm really quite surprised that you managed to linger on here to read through its frivolous nature on the famed site known by programmers as Stack Overflow and for that I congratulate you for potentially wasting your time</div>

Stop text from wrapping to 3 or more lines

DEMO

You can limit the maximum height of element and put overflow: hidden; to keep it max 2 lines.

keep your values in em so that this solution works for any font size.

Code:

p{
    font-size: 20px;
    line-height: 1.5em;
    max-height: 3.2em;
    overflow: hidden;
}

Stop text from wrapping onto multiple lines as its containing div shrinks?

white-space is your friend. Add it to your p tag style

p {
    overflow: hidden;
    white-space: nowrap;
}

It will simply prevent the text inside the p from breaking into new line.

Updated codepen: http://codepen.io/anon/pen/Kyzpl

Any way to stop a specific line of text from overflowing onto the next line?

white-space: nowrap;
overflow: hidden;

should do it (in ie8 and up at least)

*edit Just double-checked and it shoudl be ok in older ie too http://reference.sitepoint.com/css/white-space

How to avoid line breaking of the text?

Use the property white-space to prevent line break. Default value is normal

white-space: normal: Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default

You can set it to nowrap so the text won't wrap to the next line until there's a <br> tag.

white-space: no-wrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered

p.my-selector{
  white-space: no-wrap;
}

W3schools - CSS white-space property

MDN - CSS white-space property

Why each word is in a separate line?

Adding white-space: nowrap will ensure that the element text does not wrap, and stays on one line.

.header__options {  background: black;}.header__options a {  margin-right: 20px;  font-size: 14px;  text-decoration: none;  color: #ffffff;  font-family: Arial, sans-serif;    /* Add white-space: nowrap */  white-space: nowrap;}

<div class="header__options">    <a href="#" onclick="showDetails(0)">        Dernières minutes    </a>    <a href="#" onclick="showDetails(1)">        Vol    </a>    <a href="#" onclick="showDetails(2)">        Séjour    </a>    <a href="#" onclick="showDetails(3)">        Location    </a>    <a href="#" onclick="showDetails(4)">        Camping    </a>    <a href="#" onclick="showDetails(5)">        Hôtel    </a>    <a href="#" onclick="showDetails(6)">        Train    </a></div>

article:first-of-type p.DropCap:first-of-type:first-letter {
  font-size: 3em;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  line-height: 1em;
  float: left;
}

<div>
  <h2>An article with a long first paragraph</h2>
  <article>
    <p>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
      Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </p>
  </article>
</div>
<div>
  <h2>An article with a short first paragraph</h2>
  <article>
    <p>Hello</p>
  </article>
</div>
<div>
  <h2>An article with a first paragraph that is long on narrower viewports</h2>
  <article>
    <p>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</p>
  </article>
</div>
<script>
  function init() {
    const ps = document.querySelectorAll('article:first-of-type p:first-of-type');
    ps.forEach(p => {
      const h = window.getComputedStyle(p).height;
      const savedInnerHTML = p.innerHTML;
      p.innerHTML = 'g';
      const tempH = window.getComputedStyle(p).height;
      if (h.replace('px', '') >= (1.1 * tempH.replace('px', ''))) {
        p.classList.remove('oneLineDropCapAlternative');
        p.classList.add('DropCap');

      } else {
        p.classList.remove('DropCap');
        p.classList.add('oneLineDropCapAlternative');
      }
      p.innerHTML = savedInnerHTML
    });
  }
  window.onload = init;
  window.onresize = init;
</script>

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

import textwrap

str1 = "My long strings need to get wrapped at words, not randomly between characters"
str2 = textwrap.fill(str1, 20)

My long strings need
to get wrapped at
words, not randomly
between characters

'My long strings need\nto get wrapped at\nwords, not randomly\nbetween characters'