CODEWITHSUNDEEP
htmlcsstextformattinginline
Becca Evans
Becca Evans

Reputation: 13

How can I text on a single line only using HTML and inline CSS?

I'm currently redesigning a company's email signature and am having trouble with the phone and fax numbers running over more than one line when viewed on an iPhone.
The problem is that this information is displayed in a single cell table like so:

T: +44 (0)208 1234 1234
F: +44 (0)208 1234 1234
address line 1
address line 2
address line 3

but the numbers end up spilling over when viewed on a smart phone like this:

T: 44 (0)208 1234
1234
F: 44 (0)208 1234
1234

I want to keep each line after the other, not have big line breaks like the ones you get with paragraph and div tags or even separate table data (even with no spacing or padding) so am having problems adding attributes without adding unwanted spacing between each line.
Any help would be much appreciated!

Upvotes: 1

Views: 1999

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

The wrapping is caused by some limitation on the width of the cell, in your code or by the context or device. You can try to prevent wrapping in several ways: <td nowrap>...</td> or <td><nobr>...</nobr></td> or <td style="white-space: nowrap">...</td>. However, this would probably mean that the cell tries to grow beyond the limitations, which may fail or cause overflow (which may mean truncation of content or horizontal scrollbar). This all depends on the context.

Upvotes: 0

AddiktedDesign
AddiktedDesign

Reputation: 512

use white-space: nowrap

example here http://jsfiddle.net/83e9C/

Upvotes: 1

user1166981
user1166981

Reputation: 1746

You could provide a fixed width for one or more of the elements.

Upvotes: 0

Related Questions