Parsing value in Lotus Notes Xpage - html

Question

I have a table that pulls values in an xpage in Lotus notes. I have nowrap set so it doesn't wrap. Currently the value extends the width of my columns when I set it to nowrap. However, I don't need to see the whole value that is pulls. I only need to see if a value is in there. So I need the column size to remain the same size. I have tried to use various width values in the xpage. However, the value still extends the column. So either I need to parse the value to make it smaller or figure out where to add the width value so it doesn't increase with the variable.
Thanks in advance.
<td>
<div>
<xp:text escape="false" style="white-space:nowrap" id="computedFieldStatementNotesDisplay" value="#{auditDoc.StatementNotesDisplay}">
</xp:text>
</div>
</td>

Answer 1

Two quick solutions I can think of:
use a css overflow statement overflow: hidden, overflow: auto or maybe overflow: scroll and apply this to the containing <td> or <div> tags; also you might consider setting the table column's width to some value
limit the amount of characters displayed in column using SSJS.
JS code could be like this:
var limit=20; //test for max allowable chars
var val=auditDoc.getItemValueString("StatementNotesDisplay");
if(val.length>limit){
val=val.left(limit);
}
return val;
CSS solution might be the preferred one
Update:
Just saw Per's comment linking to a css solution which is quite complete

Answer 2

I want to thank everyone for their response. I took the information given and applied it. I had to add the width to the text as well place the settings in the .css. This is what worked.
I added this to the .css
.ellipsis span {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
display:inline-block;
}
Then inside the xpage I called ellipsis and then set the width in the text area.
<td class="ellipsis">
<xp:text escape="false" id="computedFieldStatementNotesDisplay" value="#auditDoc.StatementNotesDisplay}" style="width:100px">
</xp:text>
</td>