gpt4 book ai didi

html - 在 Chrome 中,如何跨度不换行,但段落仍然换行?

转载 作者:可可西里 更新时间:2023-11-01 12:59:45 26 4
gpt4 key购买 nike

如下所示,位于 https://jsfiddle.net/a6b37kx6/1/我有一个 <p>分为<span> .是日文,正文中没有空格。我不希望在跨度内发生换行,所以我使用 .word {white-space:nowrap;}在 CSS 中。 (P 标签上的宽度和边框只是为了避免您必须调整浏览器大小才能看到问题;在实际应用程序中,段落宽度将是自动的。)

这在 Firefox 中按预期工作:

enter image description here

但在 Chrome 中使用 white-space:nowrap在跨度上意味着它显示为一条长线。这是 Chrome 错误吗?即使是,是否有解决方法?

<html>
<head>
<style>
html {font-size:20px;}
p {width:10rem;border:1px solid black;}
.word {white-space:nowrap;}
</style>
</head>
<body>
<p>
<span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">80億円</span><span class="word">から</span><span class="word">50億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span>
</p>
</body>
</html>

最佳答案

我不确定这是 chrome 中的错误还是导致 chrome 出现这种行为的其他原因。

但是,默认情况下,<span>是一个 inline元素。就去做吧inline-block问题将得到解决。

.word {
display: inline-block;
vertical-align: top;
}

html {font-size:20px;}
p {width:10rem;border:1px solid black;}
.word {
white-space:nowrap;
display: inline-block;
vertical-align: top;
}
<p>
<span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">80億円</span><span class="word">から</span><span class="word">50億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span>
</p>

关于html - 在 Chrome 中,如何跨度不换行,但段落仍然换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41829815/

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