How to Avoid Content of Span Break in Two Lines

Prevent line-break of span element

Put this in your CSS:

white-space:nowrap;

Get more information here: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

The white-space property declares how white space inside the element is handled.

Values

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.

inherit
Takes the same specified value as the property for the element's parent.

How to avoid content of span break in two lines?

You can use nowrap:

span{
  white-space: nowrap;
}

Preventing line breaks between inline-block elements longer than 1 line

Width of the inline-block elements is automatically determined by its contents. As 1st span element is occupying max width of the row, 2nd element is getting wrapped to next line and same with 3rd span as well. Last two elements are in same line because they have the enough space to occupy.

Simple solution of this will be changing display : inline-block to display:inline

Line break in span

You can add white-space: pre-line; to the .appear class so the words are broken when line breaks are added.

.heading {
  font-weight: bold;
  vertical-align: top;
  height: auto;
  font-stretch: extra-expanded !important;
  overflow: hidden;
  
  display: inline-block !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  white-space: normal;

}
.appear {
  white-space: pre-line;
}
.heading span {
  font-size: 1.1rem !important;
  word-break: break-all !important;

  display: inline-block !important;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  word-wrap: break-word !important;
  /* margin: 0; */
  display: block !important;
  /* white-space: normal; */ remove white-space here
  /* line-height: 57px; */
}

<span class="heading"><span class="appear">WORD1WORD1 WORD2WORD2</span></span>
<span class="heading"><span class="appear">WORD1WORD1   
WORD2WORD2
</span></span> 
<span class="heading"><span class="appear">WORD1WORD1 WORD2WORD2</span></span>

How to make the span text not to be pushed to next line based on the preceding span element content using css?

For breaking the text in a certain part, add a <br /> line break and that's what they're used for.

In case, if you want a text not break apart, use the following CSS, but make sure you wrap it inside a span or something.

span {
  white-space: nowrap;
}

In your case, if I understand correctly, you want this:

Totally, always two lines.
Available should be in its own line.
Whatever the value, the next line should be in one single line.

Here's my proposal:

<secondText size={12}>
    <div className="status">Available</div>
    <div className="value">some value2</div>
</secondText>

And for the CSS part:

.value {
  white-space: nowrap;
}

Also I noticed something. If secondText is a custom React component, make sure it starts with an uppercase. Like SecondText.

Hope the explanation is better. I have used <div> as the line break here is presentational and not a content.

Multi-line text border issue with span tag

add property display: inline-block;

.border-title { border: 1px solid blue; display: inline-block;}

<div style="max-width: 300px;"><span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span></div>

Multiline span behaves like a block?

This seems like a bug. According to the spec:

This property specifies soft wrap opportunities between letters, i.e.
where it is “normal” and permissible to break lines of text.

Soft wrapping of an inline element is based on the width of its block element ancestor. Generally, that occurs where there's space or certain punctuation. (Add an exclamation point or question mark randomly in the Ws, and it will break.)

The word-break: line-break spec states that soft wrapping could occur between two letters, and that this property applies to "all elements." However, it seems to work for block-level elements only in IE.

You can solve this particular problem by moving word-break to the container:

.container {
  word-break: break-all;
}

Fiddle

Can CSS force a line break after each word in an element?

Use

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).

How to have spans not line-break, but the paragraph still line-break, in Chrome?

I'm not sure that this is a bug in chrome or something else causing chrome to behave like this.

However, by default, <span> is an inline element. Just make it inline-block and problem will be fixed.

.word {
  display: inline-block;
  vertical-align: top;
}

html {font-size:20px;}p {width:10rem;border:1px solid black;}.word {  white-space:nowrap;  display: inline-block;  vertical-align: top;}

<p>  <span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">８０億円</span><span class="word">から</span><span class="word">５０億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span></p>