Different text positioning for single line and multi-line text

Question

Is it possible to set different text positioning for single line and multi-line text with using just CSS?

For example: I want my single short line of text to be center aligned, but when text exceeds single line length and becomes multi-line text, it should be left aligned.

Answer 1

You can use CSS tables:

div {
  display: table;
  margin: 0 auto; /* Center container horizonatlly */
  text-align: left; /* Align text to the left */
}

<div>The quick brown fox jumps over the lazy dog.</div>
<hr />
<div>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>

CSS tables work because they are sized using the shrink-to-fit algorithm, but are still block-level in-flow elements. CSS3 exposes this size via the fit-content keyword, so you no longer have to rely on weird tabular layouts, but it's not widely supported yet.

div {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto; /* Center container horizonatlly */
  text-align: left; /* Align text to the left */
}

<div>The quick brown fox jumps over the lazy dog.</div>
<hr />
<div>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>

Answer 2

You can use a combination of different text-align and display values to achieve that.

.outer {
  text-align: center; /*center the inner inline block mainly*/
  display: block; /*not needed here but if using nested <span>s*/
}
.inner {
  text-align: left; /*reset the text to be left aligned*/
  display: inline-block; /*the width of the box based on content length*/
}

<div class="outer">
  <div class="inner">The quick brown fox jumps over the lazy dog.</div>
</div>
<hr>
<div class="outer">
  <div class="inner">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice.</div>
</div>

You can also use flexbox, it makes it easy for vertically centering the text too.

.container {
  display: flex;
  justify-content: center; /*center horizontally*/
  align-items: center; /*center vertically*/
  height: 100px;
  border: 1px solid;
}

<div class="container">
  The quick brown fox jumps over the lazy dog.
</div>
<hr>
<div class="container">
  "The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice.
</div>

One more way would be using CSS table for centering horizontally, similarly to the other suggestion, but also using CSS table cell for centering vertically.

.outer {
  display: table;
  margin: auto; /*center horizontally*/
  height: 100px;
  border: 1px solid;
}
.inner {
  display: table-cell;
  vertical-align: middle; /*center vertically*/
}

<div class="outer">
  <div class="inner">The quick brown fox jumps over the lazy dog.</div>
</div>
<hr>
<div class="outer">
  <div class="inner">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice.</div>
</div>