PDA

View Full Version : Forcing word wrap to non-editable content

Prof. Snape
10-28-2002, 12:35 AM
hi folks,

this one's maybe kinda freaky - i don't know any solution yet :rolleyes:

the situation is as follows:

content submitted by an external website is to be embedded in a "template" - exactly: you get maybe "BookTitelGoesHereMaybeHarryPotterAndTheGobletOfFire". This text has to be embedded in a construction like
<table>
<tr>
<td width="45">EmbeddedTextHere</td>
<td width="20">EUR 19.90</td>
</tr>
</table>

of course all that text is much too long for a "width=45" so it entlarges the table cell. this must not be. is there any possibilty of preventing this?
note that i do not have any influence on the textes that are submitted by the externel site.
DCElliott
10-28-2002, 04:02 AM
Justtogetthisclear. We are talking about content that has no breaks (whitespace) and is too wide for 45 pixels (but you would allow the cell to grow vertically, right?). The table model "shrinkwraps" content and expands to accomodate, messing up the layout. I take it that you want the text to wrap to another line even though it might mean arbitrarily chopping.

Have to give this some thought. You can force content that is too large to not be displayed with an overflow:invisible; style, but that doesn't help.

How are you "getting" the content - is it run through a database query? If that were the case, you could use a string function to chunk it. But what if the viewer changes font sizes? Hmmm.

Would you allow an automatic horizontal scroller in the cell if content exceeded the width?

DE
Prof. Snape
10-28-2002, 04:50 AM
Hi DC,

thanks for replying that fast.

Yes, the layout gets messed up if the string was too long for 45.

So how about this "overflow"? Are you sure it's not working? Where do I have to embed it? Within the <td...>-tag?

To answer your question: I'm getting the content via a form on this externel website. All data are submitted with use of the "post" method.

On the one hand my question is -of course- because of database-"trouble", on the other hand it is because someday I might ask this for "normal" HTML, too :) .
pezland
10-28-2002, 10:35 AM
Not sure about regular HTML or CSS, but PHP has a built-in wordwrap function, as such:


<?php
$text = "BookTitleGoesHereMaybeHarryPotterAndTheGobletOfFire";
print(wordwrap($text, 20, "<br>", 1));
?>

which would print:

BookTitleGoesHereMay
beHarryPotterAndTheG
obletOfFire

I set the character break to 20 to make the output a little more obvious for this, but you'd just set it to 45. To grab form post data you could just change the $text to be $HTTP_POST_VARS["formfieldname"].
DCElliott
10-28-2002, 03:35 PM
You can get pretty good control over table formatting with CSS. One thing you might consider is letting the table get bigger depending on the browser window size. For example: the table defined below with "width:30%; min-width:150px;" will take up ~1/3 the window or 150px whichever is greater.

A couple of other tricks - using a smaller, but very clear font (verdana) with tight leading and -ve letter-spacing allows you to squeeze in two lines in a very small space while maintaining good readability.

I've shown a wrapped line and an overflow line. The overflow is invisible, but at least it doesn't affect the table structure. "table-layout:fixed;" creates a table that sizes columns according to the first column widths encountered in the table. This is done with the #col1 & #col2 statements.

One trick you could do to recover the "lost" text is to put it in the <td> as a title. If you paste the example into a page and save it, you will notice you get the full title when you hover over the cell. It is a bit of a kludge, but it would work. :hmmmm: (Yeah, I don't know if I feel good about it either)

I've wracked my brain, but I don't know of anything in HTML per se that will achieve what you need.

If you are able to use pezland technique, consider using <wbr> instead of <br> - that way it will only break the line if it has to if you use a flexible width table such as I have outlined below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
<!--
Table {
display: table;
table-layout:fixed;
font: normal normal 8pt/7pt verdana, helvetica, arial, sans-serif;
letter-spacing:-.1em;
border: 1px solid black;
border-collapse: collapse;
overflow:invisible;
background:lightblue;
}
TD {
border: 1px solid green;
vertical-align: center;
height:2em;
}
TH {background:slateblue; color:yellow;
font-size:120%; line-height:1.5em;
}
#example {
width:30%; min-width:150px;
}
#col1 {width: 75%;}
#col2 {width: 25%;}
TD.col2 {text-align:right;}
-->
</style>
</head>

<body>

<table id="example">
<col id="col1"> <col id="col2">
<tr>
<th>Book</th><th>Cost</th>
</tr>
<tr>
<td class="col1" title="Book Title Goes Here Maybe Harry Potter And The Goblet Of Fire">Book Title Goes Here Maybe Harry Potter And The Goblet Of Fire</td>
<td class="col2">EUR 19.90</td>
</tr>
<tr>
<td class="col1" title="BookTitleGoesHereMaybeHarryPotterAndTheGobletOfFire">"BookTitleGoesHereMaybeHarryPotterAndTheGobletOfFire"</td>
<td class="col2">US 27.90</td>
</tr>
</table>

</body>
</html>