不知道其它的项目的页面上的字符串是怎么显示的，我们的产品中，有些字符串很长，但是显示他们的地方可能没有那么宽，换行又不美感，我们的解决方案是显示部分文章后面放一个放大镜，用户把鼠标移到放大镜上的时候显示全部的内容，但是这个方法有个缺点，就是字符的宽度都是不一样的，我们输出的时候选择输出固定个数的字符，这样很多时候就有一些空白的地方可以多显示一些字符的（要照顾全部是M或者W的情况，不考虑中文），然后美国那边要求研究一下有没有好一些的解决方法，可以根据宽度自动显示相应的字符串，如果某些部分的宽度调整了也自动的多显示或者少显示一些字符。
本来我找到一个使用CSS的方法，可以较好的满足上面的需求：
<style type=’text/css’>
.smartStringExpander {
word-break : break-all;
overflow:hidden;
width:200px;
}
</style>
<div class="smartStringExpander"><nobr>abcdefghi jklmnabcdefghi jklmnabcdefghij klmn111111111</nobr></div>
但是我怎么也不能再在后面加一个放大镜的图片了，如果把overflow那个属性移掉就可以在后面加了，但是又失去意义了。
郁闷
更新：
在郁闷的时候突然想到自己很傻，为什么把那两个部分丢到一个table里面呢，呵呵。
最终的例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Smart String Expander</TITLE>
<style type=’text/css’>
.smartStringExpander {
word-break : break-all;
overflow:hidden;
}
</style>
</HEAD>
<BODY>
<h1>
<code>
Fixed layout table
</code>
</h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
<td width="75%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="25%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
MMdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
<td width="75%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
WWWWWfghi jklmnabcdefghijklm nabcdefg hijklmn111111111 ddd ff
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="table-layout:fixed" width="400">
<tr>
<td width="25%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
<td width="75%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="25%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
MMdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
<td width="75%">
<table style="table-layout:fixed">
<tr>
<td>
<div class="smartStringExpander">
<nobr>
WWWWWfghi jklmnabMMMklm nabcdefg hijklmn111111111 ddd ff
</nobr>
</div>
</td>
<td width="9">
<IMG SRC="magnifying_glass.gif">
</td>
</tr>
</table>
</td>
</tr>
</table>
</HTML>
效果：
Fixed layout table
|
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
|
 |
|
|
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
|
|
|
|
MMdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
|
|
|
|
WWWWWfghi jklmnabcdefghijklm nabcdefg hijklmn111111111 ddd ff
|
|
|
|
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
|
|
|
|
abcdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
|
|
|
|
MMdefghi jklmnabcdefghijklmnabcdefg hijklmn111111111
|
|
|
|
WWWWWfghi jklmnabMMMklm nabcdefg hijklmn111111111 ddd ff
|
|
|
(Visited 127 times, 1 visits today)
2007年2月17日 at 22:23
good
我正好也要解决这个问题
总算有点启发了
2007年2月17日 at 22:25
但这个好像对firefox支持得不够好
这是为什么