Question

我对css有这个问题：动态div包含一行文本，每当div将其宽度调整为较小的大小时，我需要将其包装。

但我的问题是文本在表格内。它不是纯文本，它实际上充当了联系人的目录，就像分页一样。

请参阅我附上的图片，以便更好地查看我的问题。我还附上了下面的部分代码。请参阅附图，以便更好地了解问题。

我不太熟悉css，所以我希望你能建议一个更好的布局。

希望你能帮助我。谢谢！：）

<div id="divSearch" style="width:350px">
<p style="word-wrap:break-word;white-space:pre-wrap;">
    <table id="tblGlossary">
        <tr>
            <td class="glossary"><a href="#" >#</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=A'">A</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=B'">B</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=C'">C</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=D'">D</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=E'">E</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=F'">F</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=G'">G</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=H'">H</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=I'">I</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=J'">J</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=K'">K</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=L'">L</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=M'">M</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=N'">N</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=O'">O</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=P'">P</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=Q'">Q</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=R'">R</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=S'">S</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=T'">T</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=U'">U</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=V'">V</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=W'">W</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=X'">X</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=Y'">Y</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=Z'">Z</a></td>
        </tr>
    </table>
</p>
</div>

Before

After

Answer 1

用没有固定宽度的div替换整个表：

<div id="divGlossary">
    <a href="#" >#</a>
    &nbsp;
    <a href="www.abc.com?tag=A'">A</a>
    &nbsp;
    <a href="www.abc.com?tag=B'">B</a>
    &nbsp;
    <a href="www.abc.com?tag=C'">C</a>
    &nbsp;
...

由于您已经在div中使用了表，因此可以使用该表。

自动换行属性不会以您希望的方式应用于表格单元格。

Answer 2

我删除了<table>并将其替换为<div>标记：

Live Demo

<强> HTML：

<div id="divSearch" style="width:350px">
<p style="word-wrap:break-word;white-space:pre-wrap;">
    <div id="tblGlossary">
            <a href="#">#</a>
            <a href="www.abc.com?tag=A'">A</a>
            <a href="www.abc.com?tag=B'">B</a>
            <a href="www.abc.com?tag=C'">C</a>
            <a href="www.abc.com?tag=D'">D</a>
            <a href="www.abc.com?tag=E'">E</a>
            <a href="www.abc.com?tag=F'">F</a>
            <a href="www.abc.com?tag=G'">G</a>
            <a href="www.abc.com?tag=H'">H</a>
            <a href="www.abc.com?tag=I'">I</a>
            <a href="www.abc.com?tag=J'">J</a>
            <a href="www.abc.com?tag=K'">K</a>
            <a href="www.abc.com?tag=L'">L</a>
            <a href="www.abc.com?tag=M'">M</a>
            <a href="www.abc.com?tag=N'">N</a>
            <a href="www.abc.com?tag=O'">O</a>
            <a href="www.abc.com?tag=P'">P</a>
            <a href="www.abc.com?tag=Q'">Q</a>
            <a href="www.abc.com?tag=R'">R</a>
            <a href="www.abc.com?tag=S'">S</a>
            <a href="www.abc.com?tag=T'">T</a>
            <a href="www.abc.com?tag=U'">U</a>
            <a href="www.abc.com?tag=V'">V</a>
            <a href="www.abc.com?tag=W'">W</a>
            <a href="www.abc.com?tag=X'">X</a>
            <a href="www.abc.com?tag=Y'">Y</a>
            <a href="www.abc.com?tag=Z'">Z</a>
    </div>
</p>
</div>

<强> CSS：

#tblGlossary a {
    padding: 0 2px
}

Answer 3

你不能得到一个表来包装。好吧，我想你可以尝试display: inline一切......？

Answer 4

如果您不介意使用滚动条，可以应用以下样式：

#longlines {
clip : auto;
overflow : scroll;
}

这将解决你的问题我希望让我知道

 <div width="10%" style="position: absolute; left: 2%; word-wrap:break-word;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;word-wrap:break-word;"> bbbb </div>

或

在文字周围使用<Span> </span>

在动态div中包装单行文本

4 个答案: