gpt4 book ai didi

html - 带边框的代码在段落内奇怪地环绕

转载 作者:行者123 更新时间:2023-12-04 10:27:06 25 4
gpt4 key购买 nike

我正在为一个简单的页面编写 CSS,但偶然发现了一个问题。我有一种代码样式,使其具有简单的边框。问题是当该行在段落内时,该行在该代码内换行。例如,下面的代码:

<!DOCYPE html>
<html>

<head>
<meta charset="utf-8"/>
<style type="text/css">
p { text-align: justify; }
code { border: 1px solid black; border-radius: 3px; }
</style>
</head>

<body>
<p>
Here I have a paragraph and a really long code text:
<code>I'm a really long code text with a border.</code>
</p>
</body>

</html>

It appears something like this.

当该行在代码元素内换行时,边框在第一行停止并在第二个不完整的中断处继续,这有点难看。我想让该行不能在代码元素内换行,就好像该元素被视为段落中的单个单词并完全出现在下一行;或者边框在换行时停止并在下一行开始时再次出现。但是,我不知道如何做到这一点,而且我在互联网上也没有找到类似的东西,有人可以帮助我吗?

最佳答案

您可以使用 display: inline-blockdisplay: blockcode元素

code {
border: 1px solid black;
display: inline-block;
}
<p>
Here I have a paragraph and a really long code text:
<code>I'm a really long code text with a border. I'm a really long code text with a border.</code>
</p>

关于html - 带边框的代码在段落内奇怪地环绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60590304/

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