主页 / coding / 问题 / 77713490
Accepted
KansaiRobot
Asked: 2023-12-25 19:26:22 +0800 CST

我怎样才能有一个 div 来放置一条中断且不会超出 div 的消息？

  • 772

我想要在 Html 中显示一条消息

现在我有

f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; line-height: 200px;">{message}</div>'

问题是如果这条消息太长，消息的其余部分将出现在外部并侵入其他元素空间

理想情况下我想要类似的东西

在此输入图像描述

我应该如何修改html？

我努力了

 noplot_message=f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; word-wrap: break-word; display: inline-block; line-height: 200px;">{message}</div>'

       noplot_message=f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; word-wrap: break-word;overflow-wrap: break-word ; word-break: break-word;line-height: 200px;">{message}</div>'

但它没有起作用

html

2 个回答

  1. Best Answer

    您可以使用CSS属性overflow及其值hidden来隐藏溢出内容。此外，您可以使用word-wrap:break-word; 可以设置。允许将长单词分解并换行到下一行。

    noplot_message = f'<div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; overflow: hidden; word-wrap: break-word; line-height: 1.5;">{message}</div>'
    • 2

  2. 要获得所需的结果，可以使用以下 HTML 代码：

    <div style="width: 200px; min-height: 200px;  border: 1px solid black; word-break: break-word;line-height:1.5; padding: 50px 20px;">{message}</div>

    谢谢。

    • 1

相关问题