HTML+CSS: How to force div contents to stay in one line

csshtml

I have a long text inside a div with defined width:

HTML:

<div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

How could I force the string to stay in one line (i.e. to be cut in the middle of "Overflow") ?

I tried to use overflow: hidden, but it didn't help.

Best Answer

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Related Solutions

Css – How to vertically center a “div” element for all browsers using CSS

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

View A Working Example With Dynamic Content

I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.

Html – How to make a div not larger than its contents

The solution is to set your div to display: inline-block.

Best Answer

Related Solutions

Css – How to vertically center a “div” element for all browsers using CSS

Html – How to make a div not larger than its contents

Related Topic