Styjun

How Total raw is calculated for Science pack 2?

Can an intercepting fighter jet force a small propeller aircraft down without completely destroying it?

Ideal characterization of almost convergence

How to check status of Wi-Fi adapter through command line?

How do I stop making people jump at home and at work?

How to align values in table according to the pm and point?

Does secure hashing imply secure symmetric encryption?

Declaring 2 (or even multi-) dimensional std::arrays elegantly

Why not use futuristic pavise ballistic shields for protection?

Is it safe for a student to give negative feedback in student evaluations?

My boss says "This will help us better view the utilization of your services." Does this mean my job is ending in this organisation?

Which is the best password hashing algorithm in .NET Core?

Would there be balance issues if I allowed opportunity attacks against any creature, not just hostile ones?

Map a function that takes arguments in different levels of a list

What is a "fat pointer" in Rust?

What is the maximal acceptable delay between pilot's input and flight control surface actuation?

Is mathematics truth?

Calculus Books, preferably Soviet.

Using font to highlight a god's speech in dialogue

Design of 50 ohms RF trace for 2.4GHz...Double layer FR-4 PCB

Why do old games use flashing as means of showing damage?

Meaning of "educating the ice"

Are manifolds admitting a circle foliation covered by manifolds with a (non-trivial) circle action?

Playing boules... IN SPACE!

How can we break two words into separate line? [duplicate]

Can CSS force a line break after each word in an element?converting white space into line breakConvert HTML + CSS to PDF with PHP?Multiple line code example in Javadoc commentHow can I know which radio button is selected via jQuery?Word-wrap in an HTML tableHow to force a line break in a loooooong word in a DIV?How can I transition height: 0; to height: auto; using CSS?No line-break after a hyphenIs the recommendation to include CSS before JavaScript invalid?What is Bootstrap?Is it possible to apply CSS to half of a character?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

This question already has an answer here:

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


• 
  converting white space into line break
  
  2 answers
  
  

I have a word 'Mon 24'.
What is the best approach to break it into different line as in

Mon
24

through css?

I have tried using word-break: break-all but no luck.
https://codepen.io/bbk_khadka/pen/zbVLEp

html css

share|improve this question

edited Mar 28 at 2:11

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 28 at 1:46

Bibek KhadkaBibek Khadka

8199 bronze badges

marked as duplicate by Alexander Nied, kukkuz css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 28 at 2:10

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  stackoverflow.com/questions/24510027/…
  
  – kukkuz
  Mar 28 at 2:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Possible duplicate of "Can CSS force a line break after each word in an element?". Take a look at that link-- I think it might contain what you need.
  
  – Alexander Nied
  Mar 28 at 2:02
  
  

  
  
  
  

add a comment | 

1

This question already has an answer here:

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


• 
  converting white space into line break
  
  2 answers
  
  

I have a word 'Mon 24'.
What is the best approach to break it into different line as in

Mon
24

through css?

I have tried using word-break: break-all but no luck.
https://codepen.io/bbk_khadka/pen/zbVLEp

html css

share|improve this question

edited Mar 28 at 2:11

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 28 at 1:46

Bibek KhadkaBibek Khadka

8199 bronze badges

marked as duplicate by Alexander Nied, kukkuz css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 28 at 2:10

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  stackoverflow.com/questions/24510027/…
  
  – kukkuz
  Mar 28 at 2:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Possible duplicate of "Can CSS force a line break after each word in an element?". Take a look at that link-- I think it might contain what you need.
  
  – Alexander Nied
  Mar 28 at 2:02
  
  

  
  
  
  

add a comment | 

This question already has an answer here:

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


• 
  converting white space into line break
  
  2 answers
  
  

I have a word 'Mon 24'.
What is the best approach to break it into different line as in

Mon
24

through css?

I have tried using word-break: break-all but no luck.
https://codepen.io/bbk_khadka/pen/zbVLEp

html css

share|improve this question

edited Mar 28 at 2:11

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 28 at 1:46

Bibek KhadkaBibek Khadka

8199 bronze badges

share|improve this question

edited Mar 28 at 2:11

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 28 at 1:46

Bibek KhadkaBibek Khadka

8199 bronze badges

share|improve this question

edited Mar 28 at 2:11

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 28 at 1:46

Bibek KhadkaBibek Khadka

8199 bronze badges

edited Mar 28 at 2:11

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

edited Mar 28 at 2:11

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 28 at 1:46

Bibek KhadkaBibek Khadka

8199 bronze badges

asked Mar 28 at 1:46

Bibek KhadkaBibek Khadka

8199 bronze badges

2 Answers
2

active

oldest

votes

2

Set the maximum width to be 3 characters wide

.text 
 max-width: 3ch;

https://codepen.io/anon/pen/jJjpKV

share|improve this answer

answered Mar 28 at 2:03

c01gat3c01gat3

48433 silver badges1212 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks. Is there any reason this does not work for span tags?
  
  – Bibek Khadka
  Mar 28 at 3:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  probably because spans default to display:inline. If you apply display:block it will work codepen.io/anon/pen/aMgRWN
  
  – c01gat3
  Mar 28 at 3:29
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @BibekKhadka add display:block to your span tag.
  
  – Saravana
  Mar 28 at 3:35
  

  
  
  
  

add a comment | 

2

word-break: break-all will not support all browsers to wrap down. My suggestion to use max-width and table-caption to wrap.

.text 
 display: block;
 max-width: 40px;

<div class='text'>Mon 24<div>

.text 
 display: table-caption;


Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>

share|improve this answer

edited Mar 28 at 2:14

answered Mar 28 at 2:04

SaravanaSaravana

1,95422 gold badges66 silver badges2323 bronze badges

add a comment | 

2

Set the maximum width to be 3 characters wide

.text 
 max-width: 3ch;

https://codepen.io/anon/pen/jJjpKV

share|improve this answer

answered Mar 28 at 2:03

c01gat3c01gat3

48433 silver badges1212 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks. Is there any reason this does not work for span tags?
  
  – Bibek Khadka
  Mar 28 at 3:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  probably because spans default to display:inline. If you apply display:block it will work codepen.io/anon/pen/aMgRWN
  
  – c01gat3
  Mar 28 at 3:29
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @BibekKhadka add display:block to your span tag.
  
  – Saravana
  Mar 28 at 3:35
  

  
  
  
  

add a comment | 

2

Set the maximum width to be 3 characters wide

.text 
 max-width: 3ch;

https://codepen.io/anon/pen/jJjpKV

share|improve this answer

answered Mar 28 at 2:03

c01gat3c01gat3

48433 silver badges1212 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks. Is there any reason this does not work for span tags?
  
  – Bibek Khadka
  Mar 28 at 3:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  probably because spans default to display:inline. If you apply display:block it will work codepen.io/anon/pen/aMgRWN
  
  – c01gat3
  Mar 28 at 3:29
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @BibekKhadka add display:block to your span tag.
  
  – Saravana
  Mar 28 at 3:35
  

  
  
  
  

add a comment | 

Set the maximum width to be 3 characters wide

.text 
 max-width: 3ch;

https://codepen.io/anon/pen/jJjpKV

share|improve this answer

answered Mar 28 at 2:03

c01gat3c01gat3

48433 silver badges1212 bronze badges

.text 
 max-width: 3ch;

share|improve this answer

answered Mar 28 at 2:03

c01gat3c01gat3

48433 silver badges1212 bronze badges

answered Mar 28 at 2:03

c01gat3c01gat3

48433 silver badges1212 bronze badges

answered Mar 28 at 2:03

c01gat3c01gat3

48433 silver badges1212 bronze badges

2

word-break: break-all will not support all browsers to wrap down. My suggestion to use max-width and table-caption to wrap.

.text 
 display: block;
 max-width: 40px;

<div class='text'>Mon 24<div>

.text 
 display: table-caption;


Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>

share|improve this answer

edited Mar 28 at 2:14

answered Mar 28 at 2:04

SaravanaSaravana

1,95422 gold badges66 silver badges2323 bronze badges

add a comment | 

2

word-break: break-all will not support all browsers to wrap down. My suggestion to use max-width and table-caption to wrap.

.text 
 display: block;
 max-width: 40px;

<div class='text'>Mon 24<div>

.text 
 display: table-caption;


Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>

share|improve this answer

edited Mar 28 at 2:14

answered Mar 28 at 2:04

SaravanaSaravana

1,95422 gold badges66 silver badges2323 bronze badges

add a comment | 

word-break: break-all will not support all browsers to wrap down. My suggestion to use max-width and table-caption to wrap.

.text 
 display: block;
 max-width: 40px;

<div class='text'>Mon 24<div>

.text 
 display: table-caption;


Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>

share|improve this answer

edited Mar 28 at 2:14

answered Mar 28 at 2:04

SaravanaSaravana

1,95422 gold badges66 silver badges2323 bronze badges

.text 
 display: block;
 max-width: 40px;

<div class='text'>Mon 24<div>

.text 
 display: table-caption;


Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>

.text 
 display: block;
 max-width: 40px;

<div class='text'>Mon 24<div>

.text 
 display: block;
 max-width: 40px;

<div class='text'>Mon 24<div>

.text 
 display: table-caption;


Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>

.text 
 display: table-caption;


Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>

share|improve this answer

edited Mar 28 at 2:14

answered Mar 28 at 2:04

SaravanaSaravana

1,95422 gold badges66 silver badges2323 bronze badges

answered Mar 28 at 2:04

SaravanaSaravana

1,95422 gold badges66 silver badges2323 bronze badges

answered Mar 28 at 2:04

SaravanaSaravana

1,95422 gold badges66 silver badges2323 bronze badges