<pre> 标签比应有的高度

Question

嗨！我正在制作一个聊天应用程序，但

 标签占用了太多空间。标签之间的间距没有任何问题（我不认为），因为我已经修剪了字符串，并完全删除了它们之间的空白，但它不起作用：

function cleanseMessage(message) {
  return badwords.filter(DOMPurify.sanitize(markdown.render(message.replace(/</g, "<").replace(/>/g, "&gt;"))));
}

function createMessage(username, message, bio, date) {
  let cleansedMessage = cleanseMessage(message).trim();
  let formattedUsername = `<a href='/profile/${encodeURIComponent(
    username[0] + "@" + username[1]
  )}'>${username[0]}@${username[1]}</a>`;
  let formattedDate = `<time datetime="${date.toISOString()}">${date.toLocaleString()}</time>`;
  let formattedMessage = `<div id='message'><pre style="display: inline;">${cleansedMessage}</pre></div>`;
  let formattedDiv = `<div style='margin: 10px 0;'><div class="userDisplay">${jdenticon.toSvg(
    username[2],
    26
  )}<span>${formattedUsername} <span class="msgTime">[at ${formattedDate}]</span></span></div>${formattedMessage.trim()}</div>`;
  return formattedDiv;
}

或CSS：
#message {
  background: var(--accent);
  color: whitesmoke;
  padding: 3.5px 5px;
  border-radius: 0.5em;
  width: max-content;
  max-width: calc(100% - 10px);
  word-wrap: break-word;
  overflow: hidden;
}

pre {
  font-family: "Inter Tight", sans-serif;
  white-space: pre-wrap;
  margin: 0;
  padding: 0;
}

.userDisplay {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin-bottom: 4px;
}

.emoji {
  height: 1.2em;
}

.userDisplay > svg {
  margin-right: 4px;
  border-radius: 20px;
}

.msgTime {
  font-size: small;
}

所以我不知道。我在应用字符串之前对其进行了修剪，并删除了标签之间的所有空白，但无济于事。任何帮助都会很好，谢谢！
    

听起来您在聊天应用程序中使用了 
<pre>
 标签，但您发现它占用了太多空间，可能是由于其默认样式所致。 
<pre>
 标签保留空格和格式，包括换行符和缩进，这可能会导致您看到过多的空间。

以下是解决此问题的几种方法：

切换到不同的 HTML 元素：您可以考虑使用不同的元素，例如 
<pre>
 或 
<p>
，而不是使用 
<div>
 标签（该标签专为预格式化文本而设计并保留空格）。这些元素不会像 
<pre>
 标签那样保留空格和格式，因此您可能会看到使用的空间更少。


使用CSS样式：如果您想继续使用
<pre>
标签但控制其占用的空间量，您可以使用CSS来调整其样式。例如，您可以将 
white-space
 设置为 
normal
:

pre {
    white-space: normal;
}

您还可以调整行高、字体大小、填充和边距来控制 
<pre>
 元素占用的空间量。


检查正在添加的内容：如果您还没有，请验证正在添加到 
<pre>
 标签的内容。即使您已经修剪了字符串，内容本身也可能具有其他可能影响布局的格式（例如换行符）。


考虑使用不同的方法：根据聊天应用程序的设计，您可能想要更改显示聊天消息的方式。例如，使用一系列 
<div>
 元素或其他结构可以让您更好地控制布局。



如果您可以提供有关应用程序结构以及如何使用 
<pre>
 标签的更多具体详细信息，我可以提供更准确的建议。

    

Answer 1

听起来您在聊天应用程序中使用了

<pre>

标签，但您发现它占用了太多空间，可能是由于其默认样式所致。

<pre>

标签保留空格和格式，包括换行符和缩进，这可能会导致您看到过多的空间。

以下是解决此问题的几种方法：

1. 切换到不同的 HTML 元素：您可以考虑使用不同的元素，例如

   <pre>

   或

   <p>

   ，而不是使用

   <div>

   标签（该标签专为预格式化文本而设计并保留空格）。这些元素不会像

   <pre>

   标签那样保留空格和格式，因此您可能会看到使用的空间更少。

2. 使用CSS样式：如果您想继续使用

   <pre>

   标签但控制其占用的空间量，您可以使用CSS来调整其样式。例如，您可以将

   white-space

   设置为

   normal

   :

   pre {
       white-space: normal;
   }
   

   您还可以调整行高、字体大小、填充和边距来控制

   <pre>

   元素占用的空间量。

3. 检查正在添加的内容：如果您还没有，请验证正在添加到

   <pre>

   标签的内容。即使您已经修剪了字符串，内容本身也可能具有其他可能影响布局的格式（例如换行符）。

4. 考虑使用不同的方法：根据聊天应用程序的设计，您可能想要更改显示聊天消息的方式。例如，使用一系列

   <div>

   元素或其他结构可以让您更好地控制布局。

如果您可以提供有关应用程序结构以及如何使用

<pre>

标签的更多具体详细信息，我可以提供更准确的建议。