解惑

解己之惑,解人之惑

显示超长文字

不知道其它的项目的页面上的字符串是怎么显示的,我们的产品中,有些字符串很长,但是显示他们的地方可能没有那么宽,换行又不美感,我们的解决方案是显示部分文章后面放一个放大镜,用户把鼠标移到放大镜上的时候显示全部的内容,但是这个方法有个缺点,就是字符的宽度都是不一样的,我们输出的时候选择输出固定个数的字符,这样很多时候就有一些空白的地方可以多显示一些字符的(要照顾全部是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 33 times, 1 visits today)

2 Comments

  1. good
    我正好也要解决这个问题
    总算有点启发了

  2. 但这个好像对firefox支持得不够好
    这是为什么

发表评论

电子邮件地址不会被公开。 必填项已用*标注

© 2020 解惑

本主题由Anders Noren提供向上 ↑