gpt4 book ai didi

html - 为什么空格会影响使用空白的样式,如何解决这个问题?

转载 作者:行者123 更新时间:2023-11-28 11:17:09 33 4
gpt4 key购买 nike

在这个例子中

<html>
<head>
<style>
.q_show_spaces {
white-space: pre-wrap;
}

.q_inline {
display: inline;
}

.q_no_wrap {
white-space: pre;
}
</style>
</head>

<body>
<div style="width:400px;border:solid 1px">
<div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb, </div></div><div class="q_inline">by like terms</div></div>
</div>

<br />
<br />

<div style="width:400px;border:solid 1px">
<div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb,</div></div><div class="q_inline"> by like terms</div></div>
</div>

</body>
</html>

在第一个示例中,内容移到了 div 之外,但在第二个示例中,内容符合预期,唯一的变化是空间移出了 div。

如何解决这个问题?我不想在外面移动空间,也不想删除任何 div 或 div 上的样式。建议任何可以覆盖这些并正常工作的新样式。

抱歉,HTML 格式不正确。

最佳答案

看来您正在寻找 word-break: break-all css 属性。

在你的 CSS 中这样应用:

 .q_show_spaces {
white-space: pre-wrap;
word-break: break-all; /* or break-work, if you planning to break a word */
}

Working Fiddle

MDN Article

关于html - 为什么空格会影响使用空白的样式,如何解决这个问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21705041/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com