Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
I'm trying to set up a script that will crop a piece of text to make sure it doesn't exceed three lines 350px wide.
The only solid way I can think of doing this is by writing an algorithm around the string's width, but I can't figure out how do this using just PHP and JS.
I could manually code in an array of every charachter's width, but I'd like this to be my last resort.
Here is the PHP install I have to code on:
http://rutgersfordemocracy.org/phpinfo.php
There is no method within PHP or JS that can return the pixel width of a string. PostScript does, but that is not applicable to this situation.
There are a couple of things you can *try*, but due to the difficulties associated with the different settings on users computers such as screen resolution and font size, I don't think there is a sure fire remedy.
1) You can try useing a fixed-width font (or style) to display the text so that each character takes up the same ammount of space, but because of the problems noted above, I don't know if every computer would display the same ammount of characters within 350px.
2. Go with the idea you have, but I think it still would not be fool-proof.
Now, I don't know how this text fits into the overall page, but you could put it into a box with a scroll property, so that if the text is too large, the user can scroll up and down within the text box. Forget how to do it at the moment, but it is a style property. Looks like an inline frame.
0 
I've set the div tag the text is in to a fixed height, and added overflow:hidden; which is one way around it I suppose, but I still don't get an elipse... is there a way for JavaScript code to execute when a div tag overflows?
0
Assuming I understand what you want, there are two ways of doing this that I know of. If you're only interrested in doing this in IE, then you can use this very niffty css trick (unfortunately, it's only compatable with the latest two versions of IE, but I have heard that future alternate browser versions will probably support it) Heres some sample code (should actually be very similar to yours.)
------------------------
<html>
<head>
<title>Test</title>
</head>
<style type="text/css">
.Truncate
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<body>
<table width="100%">
<tr>
<td><div style="width: 200px;" class="Truncate">This is a long sentence that will hopefully truncate correctly.</div></td>
</tr>
</table>
</body>
</html>--------------------------
The bad things about doing it this way: Only supported in IE (in FF and other browsers it will just clip at the given width and not show the elipsis). You have to hard set the widths in the column style and cannot use percentage widths.
If it needs to look good in multiple browsers or needs to be able to truncate by percentage width, then this could be a better (if not a much more complicated) option. I would say I preffer this method, as it looks the same in all of the browsers I've tested and percentage widths work. Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title>Untitled</title>
<script language="javascript">
function ResizeAll()
{
var TruncTable;
TruncTable = document.getElementById('MainTable');
for (var c=0; c < TruncTable.rows[1].cells.length; c++)
{
if (TruncTable.rows[1].cells[c].childNodes[0].offsetWidth > TruncTable.rows[1].cells[c].offsetWidth)
{
TruncTable.rows[1].cells[c].childNodes[0].style.clip = 'rect(auto ' + (TruncTable.rows[1].cells[c].offsetWidth-20) + 'px 20px auto)';
TruncTable.rows[1].cells[c].childNodes[1].style.left = (TruncTable.rows[1].cells[c].offsetWidth-18);
TruncTable.rows[1].cells[c].childNodes[1].style.visibility = 'visible';
}
else
{
TruncTable.rows[1].cells[c].childNodes[0].style.clip = 'rect(auto auto auto auto)';
TruncTable.rows[1].cells[c].childNodes[1].style.left = (TruncTable.rows[1].cells[c].offsetWidth-18);
TruncTable.rows[1].cells[c].childNodes[1].style.visibility = 'hidden'
}
}
}
window.onresize = ResizeAll;
</script>
<style type="text/css">
td
{
font-family:arial;
font-size:8pt
}
.t
{
position:absolute;
}
.d
{
position:relative;
}
</style>
</head>
<body topmargin="0" leftmargin="0" onload="ResizeAll()">
<form id="MainForm">
<table id="MainTable" cellpadding="0" cellspacing="0" border="1" width="100%">
<tr>
<td nowrap width="15%">Column 1</td>
<td nowrap width="20%">Column 2</td>
<td nowrap width="15%">Column 3</td>
<td nowrap width="20%">Column 4</td>
<td nowrap width="10%">Column 5</td>
<td nowrap width="20%">Column 6</td>
</tr>
<tr>
<td nowrap id="Cell1"><span class="t">Column 1 Row 1</span><span class="d">...</span></td>
<td nowrap><span class="t">Column 2 Row 1</span><span class="d">...</span></td>
<td nowrap><span class="t">Column 3 Row 1 Column 3 Row 1</span><span class="d">...</span></td>
<td nowrap><span class="t">Column 4 Row 1</span><span class="d">...</span></td>
<td nowrap><span class="t">Column 5 Row 1</span><span class="d">...</span></td>
<td nowrap><span class="t">Timestamp - 01/03/2004 21:03 (GMT)</span><span class="d">...</span></td>
</tr>
</table>
</form>
</body>
</html>---------------------------
Hopefully you can understand everything thats going on here. I wrote this JS myself and its still in the experimental stage. Basically what you want to do is test whether the text's offsetWidth is longer than the cell's. If it is, clip the text and show the ellipsis, otherwise it hides the ellipsis.
The drawbacks to this method are: The text truncates completely by pixel width so sometimes half of the last character will show (which is more or less what your code is doing now. Just without the ellipsis) Also, in FF, the window.onResize event fires only after you stop dragging the window, so while your dragging, the text can get a little garbled. (but it looks fine when you let go.)
Anyway, try copying both of these methods into an html document and try them out. See what you think. Good luck!
0
Also, feel free to post questions. I'll be checking this every so often just in case. (I'm also interrested in knowing if you improve on one of the methods.) Let me know how it goes.
0
I need the code to be compatible in as many browsers as possible, so I left it as I described earlier. Thanks for the suggestions, though! :)
0  |
 |
 |
This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |
