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 using only CSS?

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

Answer 1

To achieve this, you can use a combination of different text-align and display values.

 .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 , this makes it easier to center text vertically.

 .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> 

Another way is to use the CSS table for horizontal alignment, similarly to the other , but also use the CSS table cell to center 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> 

Answer 2

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 a shrink-to-fit algorithm, but are still block elements in the stream. CSS3 provides this size with the fit-content keyword, so you no longer need to rely on weird table layouts, but it is not yet supported.

 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 3

There is no way to do this in CSS, although this can be done in JavaScript. I would start by using string.length to determine the number of characters (although different fonts are rendered differently, and different characters can have different widths). From there, you can use jQuery or selectElement (s) By * to add and remove alignments through classes or css.