Friday, August 29, 2008

Setting column width, not minimum column width

I've been working on a web page formatted for iPhone, and in this context the width of the page and the content on the page, is very important. First of all you don't want the page to be too wide, because then the text might be too small to read. But you also want the entire page to fit within the width of the screen, because no-one wants to have to scroll from side to side when reading lines of text.

So, of course, you can use a table and specify the width of cells and table, but this actually sets the minimum width - if the content is wider than the specified width, then the cell or table will expand to suit. In my case it is a long string of continuous text without spaces in, specifically a long URL.

I'm sure the wiser ones of you reading this will already be thinking CSS. Indeed, it gave me the answer. Specifically, CSS version 3, which is not supported on all browsers. Luckily iPhone's Safari browser is one of the few browsers that does support CSS3.

The answer came from searching for how to force text to wrap to a specific width, i.e. <p style="width: 900px; word-wrap: break-word"> which I found from this page: