Question

<html> 
<head></head>
<body> 
    <div style="width: 500px; height: 80px; background-color: red; position: absolute; z-index: 1;">
    <ul style="position: absolute; z-index: 2;">
        <li> fhoaifhadlsfadslfjadhslfajshdfaldsfhalsdfjgjgldskjgaskjglsgjsldkgjslgkjsljgl </li>
        <li> </li>
    </ul>
</div>
</body>
</html>

我有一些代码，显示了一个简单的项目要点列表和一个div。到达div的末尾后，如何才能将文本换行到下一行？通常，我会使用“自动换行：断词”，但它似乎不起作用。我还能怎么做？谢谢。

Answer 1

禁止div溢出并将break-all属性添加到ul将导致您正在寻找的行为：

<html> 
<head></head>
<body> 
    <div style="width: 500px; height: 80px; background-color: red; position: absolute; z-index: 1; overflow-x: hidden;">
    <ul style="position: absolute; z-index: 2; word-break: break-all;">
        <li> fhoaifhadlsfadslfjadhslfajshdfaldsfhalsdfjgjgldskjgaskjglsgjsldkgjslgkjsljgl </li>
        <li> </li>
    </ul>
</div>
</body>
</html>

请记住，如果需要，它将在单词的中间打断，以确保它适合div

项目符号点文本-在div中换行到下一行

1 个答案: