另一种不使用br的css换行方式？

Question

<div class="HL_iconCont">
    <ul id="dates">
        <li>
            <a href="#HomeworkHelp">
                <div class="topicIconCont homework_1"><br />
                    Homework Help
                </div>
            </a>
        </li>
        <li>
            <a href="#Accounting">
                <div class="topicIconCont homework_2">Accounting<br />
                    Homework Help
                </div>
            </a>
        </li>
        <li>
            <a href="#Economics">
                <div class="topicIconCont homework_3"> Economics <br />
                    Homework Help 
                </div>
            </a>
        </li>
    </ul>
</div>

我有一个名为topicIconCont 的<div>，它在<li> 标记中重复其width:auto;。我还为每个<li> 标签使用了多个类，因为它包含不同的图标图像。现在我想打破图标图像下方<div> 中写的句子，我不能在它们之间使用<br>、<span> 或<p> 标记，因为该行将直接来自数据库。

例如：这里的代码 -

Accounting<br />
                Homework Help

有什么方法可以在不使用<br> 标签的情况下打破会计？我可以通过css管理这个吗？虽然我尝试了word break 属性，但它仍然无法正常工作。我也无法固定它的宽度，因为它在重复并且内容可能会有所不同。请尽快提出任何替代方案，我该如何解决？

问候，

尼迪

Answer 1

首先，像<div> 这样的块级元素在<a> 这样的内联元素内无效。使用 span 或类似的内联内容。

其次，只需使用 CSS 在 div 上设置 padding-top，以便内容从 div 顶部开始任意数量的方式，让您的图标很好地显示。

Answer 2

你试过this吗？

<p>Line1</p>
<p>Line2</p>

Answer 3

使用此属性white-space: normal !important 和适当的 div 宽度。 你不能在 CSS 中不使用分隔元素之一（span、div、..）来打断文本。或者您可以使用 Javascript --- 在 text 末尾使用特殊字符（@,*,..），找到它并中断文本。