CODEWITHSUNDEEP
css
user3121782
user3121782

Reputation: 159

formatting text in <h> tag to show text with space

I am trying to show message in <h5>

<h5>S  e  n  t  i  m  e  n  t       a  n  a  l  y  s  i  s</h5>

Codepan : CODEPAN

css:

h5
{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
}

It should show space between each character and two space between word. but it shows all character continuously without space.

Upvotes: 2

Views: 570

Answers (6)

Batakj
Batakj

Reputation: 12743

Change the html to normal word.

HTML

<h5>Sentiment analysis</h5>

CSS

 letter-spacing is for space between letter. And word-spacing is for space between word.

 h5
 {
      margin-left: 36%;
      color:#C0C0C0;
      text-decoration:underline;
      letter-spacing:4px;
      word-spacing : 5px;
 }

DEMO : http://cdpn.io/EvFsD

Upvotes: 1

abinaya
abinaya

Reputation: 93

For spacing between letters use "letter-spacing" and likewise for word spacing use "word-spacing"

h5{
letter-spacing : 3px;
word-spacing : 5px;
}

You can change the px value as per your requirement.

Upvotes: 1

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

You must use the property white-space, specifically pre-wrap.

h5 {
    margin-left: 36%;
    color: #C0C0C0;
    text-decoration: underline;
    white-space: pre-wrap;
}

Updated CodePen

You can find more information about this property here.

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Use letter-spacing css rule

h5
{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
    letter-spacing: .5em;
}

Demo

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Use letter-spacing property.

HTML:

<h5>Sentiment analysis</h5>

CSS:

h5{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
    letter-spacing:10px;
}

DEMO here.

Upvotes: 3

Barmar
Barmar

Reputation: 780869

Use the white-space: pre style to preserve white space.

h5
{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
    white-space: pre;
}

Upvotes: 4

Related Questions