How do I fix the width of text in CSS?

Question

In the following code snippet:

<span style="width:250px">test</span><span>test2</span>

I want 'test' to occupy 250 pixels without changing the size of the text. In other words, I would like the word 'test' to print, followed by however may pixels is required to reach a total width of 250 pixels (test + blank space) then the word 'test2' to print afterwards. What CSS do I use to achieve this?

Span will only span the length of the text. – BuddhistBeast Jul 11 '14 at 04:22 — BuddhistBeast, Jul 11 '14 at 04:22

score 4 · Accepted Answer · answered Jul 11 '14 at 04:23

4

You can try like this: Demo

HTML:

<span class="width250">test</span><span>test2</span>

CSS:

.width250{        
    width:250px;
    display:block;
    float:left;
}

answered Jul 11 '14 at 04:23

G.L.P

7,119
5
25
41

It can work without display: block if you are using float http://jsfiddle.net/c5zN2/2/ – Tushar Jul 11 '14 at 05:56

score 1 · Answer 2 · answered Jul 11 '14 at 04:25

1

Add block display

<span style="width:250px; display:block;">test</span><span>test2</span>

answered Jul 11 '14 at 04:25

iamawebgeek

2,713
1
18
34

score 1 · Answer 3 · edited Jul 11 '14 at 05:02

1

You Can use CSS like this.

<span style="width: 250px; display: inline-block;">test</span>
<span>test2</span>

edited Jul 11 '14 at 05:02

joe

8,344
9
54
80

answered Jul 11 '14 at 04:41

Developer S

33
3

score 0 · Answer 4 · answered Jul 11 '14 at 04:29

0

If you don't want a new line use

display:inline-block

instead of block!

answered Jul 11 '14 at 04:29

Perocat

1,481
7
25
48

How do I fix the width of text in CSS?

4 Answers4