How to Make Text Appear on Next Line Instead of Overflowing

How can I make text appear on next line instead of overflowing?

word-wrap: break-word

But it's CSS3 - http://www.css3.com/css-word-wrap/.

How do I make a text go onto the next line if it overflows?

As long as you specify a width on the element, it should wrap itself without needing anything else.

Text overflowing out of button instead of moving to the next line

Well the bootstrap applies white-space: nowrap to all the .btn class to wrap the button text in a single line...

So you will need to change this to white-space: normal by using a parent selector of yours so that it won't affect on all other buttons.

Also Element p not allowed as child of element button in this context..So better to use <br> instead of <p> if you want text on next line

Also The element button must not appear as a descendant of the a element...so use btn btn-info btn-block classes on <a> and remove button

#final .btn{
  white-space: normal;
}

body {

  background-color: #c0c0c0;

}

#final .btn {

  white-space: normal;

}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">

<div class="container-fluid" style="text-align : center">

  <div id="final">

    <div>

      <a href="#" target="_blank" style="text-decoration: none;" class="btn btn-info btn-block">

        <b>Heading which is okay</b><br> And this is some really really very long text which is not fitting inside my button tag and is overflowing out of the button. But this text is meant to be a small description of the heading. Lorem ipsum dolor sit

        amet, consectetur adipiscing elit. Morbi auctor iaculis enim eu ultrices. Pellentesque nec hendrerit mauris.

      </a>

    </div>

    <div id="search-result"></div>

  </div>

</div>

How to Auto New Line if a text overflows flutter

I have actually found a workaround.. that is to add a container with extra width next to the container of the text..so that the text get pushed to the side.. something like this Row( children: <Widget>[ Container( width: 70.0, ), Flexible( child: Text("Hi"), ) ], )

prevent text to line break if overflow

Use

white-space: nowrap;

on the element containing the text.

The name is pretty self-explanatory - it makes the whitespace not wrap.

Use overflow: hidden; if you don't want the text to go out of the box it's supposed to be in.

Use text-overflow: ellipsis; if you want ellipsis when the text overflows the bounding box.

JSFiddle

screenshot

p when text exceeds width, continue in new line

Your example already word-wraps (because<p> is already a block element), if you want to break words, then you could try:

p.letters {
    word-wrap: break-word;
}

Here's a basic working example: http://jsfiddle.net/G9z5M/ (see updates below).

You can play around with it using various techniques:

/* Wraps normally, on whitespace */
p.words {
    word-wrap: normal;
}    

/* Hides non-wrapped letters */
p.hidden {
    overflow: hidden;
}

/* Outputs a single line, doesn't wrap at all */
p.nowrap {
    white-space: nowrap;
}

See updated fiddle: http://jsfiddle.net/G9z5M/1/

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>

Text overflow ellipsis on two lines

I'm not sure if you have seen this article, but Chris Coyier's excellent CSS-Tricks.com posted a link to this a while back and it's a pure CSS solution that accomplishes exactly what you seek.

(Click to View on CodePen)

html,
body,
p {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.ellipsis {
  overflow: hidden;
  height: 200px;
  line-height: 25px;
  margin: 20px;
  border: 5px solid #AAA;
}

.ellipsis:before {
  content: "";
  float: left;
  width: 5px;
  height: 200px;
}

.ellipsis>*:first-child {
  float: right;
  width: 100%;
  margin-left: -5px;
}

.ellipsis:after {
  content: "\02026";
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right;
  position: relative;
  top: -25px;
  left: 100%;
  width: 3em;
  margin-left: -3em;
  padding-right: 5px;
  text-align: right;
  background-size: 100% 100%;
  /* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

<div class="ellipsis">
  <div>
    <p>
      Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of
      driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing
      up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off –
      then, I account it high time to get to sea as soon as I can.
    </p>
  </div>
</div>