Forum Moderators: not2easy
If a cell contains a long string (text) it is displayed in a cell but is wrapped according to the size of the browser.
What I'm attempting to do is have the long string cut off when it is about to wrap and when you increase the size of the browser have it reveal the wrapped parts.
The code below works but only in Firefox in Internet Explorer and Safari the text does not wrap but is displayed and fills out the full length of the <td>
Does anyone have any ideas on how to get this working in Internet Explorer and Safari?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<table>
<th width="14%">Col1</th>
<th width="14%">Col2</th>
<th width="14%">Col3</th>
<th width="14%">Col4</th>
<th width="14%">Col5</th>
<th width="14%">Col6</th>
<th width="14%">Col7</th>
<tr>
<td style="overflow: hidden;"><div style="width: 0; white-space: nowrap;">This is a really long piece of string which should be cut off</div></td>
<td>This is a really long piece of string which should be cut off</td>
<td>This is a really long piece of string which should be cut off</td>
<td>This is a really long piece of string which should be cut off</td>
<td>This is a really long piece of string which should be cut off</td>
<td>This is a really long piece of string which should be cut off</td>
<td>This is a really long piece of string which should be cut off</td>
</tr>
</table>
</body>
</html>
Is there a way to replicate this over multiple browsers?
Why can't you truncate the input server side? Being a calendar, it's most likely going to accept user input, and even if you come up with a client-side "fix" users can always figure out a way to break it. I'd do something like (logic only, language of your choice:)
$calendar_desc_length = 45;
if (length ($calendar_desc > $calendar_desc_length) {
$calendar_desc = (trim to length setting) + '. . .';
}
What I'm attempting to do is have the long string cut off when it is about to wrap ...
putting it to any other size causes the text to not wrap
wrap: go to the next line when the next word would make the inline content too long of rthe line to fit the parent.
your code sets "white-space: nowrap;" and to then make it wrap anyway you add "width:0" ? Why not remove both of them ?
Overflow:hidden should remove stuff that sticks out of the element.
BTW: your html isn't valid, try fixing that first as you'll keep putting browser in a mode where they have to guess what you meant.
(missing <tr>...</tr> and width should be set via CSS in strict.
I use fairly little css and tables at the same time myself.
Maybe you want to allow one or more lines, but be in control over how many lines are shown ?
E.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st
rict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
th, td {
width: 14%;
}
.limit div {
line-height: 1.2em;
height: 2.4em;
overflow: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
<tr class="limit">
<td><div>This is a really long piece of string which should be
cut off</div></td>
<td><div>This is a really long piece of string which should be
cut off</div></td>
<td><div>This is a really long piece of string which should be
cut off</div></td>
<td><div>This is a really long piece of string which should be
cut off</div></td>
<td><div>This is a really long piece of string which should be
cut off</div></td>
<td><div>This is a really long piece of string which should be
cut off</div></td>
<td><div>This is a really long piece of string which should be
cut off</div></td>
</tr>
</table>
</body>
</html>
The apparently superfluous div is there for a reason: setting height on a <td> is ignored by browsers (don't know a good reason for them to do this, but FF3, safari and opera do it, so maybe I missed that part in the spec.)
To have just one line: set the line-height and height to the same value.
Line height 1.2em is default for many browsers (not for opera), but I rather set it when I start to rely on it.
Didn't test it in any version of IE.
