CODEWITHSUNDEEP
htmlcss
Vignesh Bala
Vignesh Bala

Reputation: 919

how to set style for every individual character in a word or sentence?

I am trying to display counts for my website visitors. Is it possible to display a number or text like as the following image.

image of desired layout and styling

If is it possible using html and css, Please suggest me or tell me other way to fix it?

Thanks in advance ....

Upvotes: 2

Views: 1677

Answers (4)

Akshay
Akshay

Reputation: 14348

This is almost working using jquery 

var text=$('p').text()
for(var x=0;x<text.length;x++){
var newt='<span>'+text[x]+'</span>'
$('p').html($('p').html()+ newt)
}
   
span{
    width:50px;
    height:50px;
    background:orange;
    border-radius:15px;
    display:inline-block;
    text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<p>123456</p>

Upvotes: 1

Creative Enemy
Creative Enemy

Reputation: 398

It's simple.

Just slice the one box image with empty space. and set the background image and repeat-x, and every character you give line spacing

ex: 

.counter
{
width:auto; 
background: url('../images/box.png') repeat-x;
letter-spacing: 50px /* each box letter gap */
height:60px;
display:inline-block;
font: bold 20px arial;
color:#000;
text-indent:10px
}

Try this.

Upvotes: 1

Pratik
Pratik

Reputation: 1138

It is possible but then each of the digits need to be part of a seperate HTML element, each of them having the same style. So you would need to generate your HTML dynamically based on the count you have. If you hard code the HTML, then if tomorrow the count increases to a 5 digit number, you won't be able to handle it. So it needs to be JS, HTML and CSS.

Upvotes: 0

James111
James111

Reputation: 15903

What I would do is use a <span> for each letter like so:

<p><span id='num1'>1</span><span id='num2'>2</span><span id='num3'>3</span><span id='num4'>4</span>

Then just add the styling for each letter indivdually using the id or you could just add inline styles for each span

<span style='color:blue;'>1</span> and so on...

Upvotes: 0

Related Questions