主页 / coding / 问题 / 79527194
Accepted
Small Duck
Asked: 2025-03-22 17:25:39 +0800 CST

如何使背景适合换行文本而不需要额外的空间？[重复]

  • 772

我在卡片组件中遇到了 mailto 链接问题。这是我的代码：

<a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500">
    [email protected]
  </span>
</a>

问题是，正如您在附图中看到的，电子邮件周围的绿色背景左侧和右侧有多余的空间。

  • 当卡片很宽时，一切看起来都很好。

  • 当卡片变小时，文本会按预期换行，但绿色背景比文本大，从而产生不必要的填充。

我希望绿色背景在换行时能够精确缩小到文本宽度。

我尝试使用 whitespace-nowrap，但这会导致文本溢出其容器。这种方法暂时有效，但如果电子邮件太长，它最终也会溢出卡片。

有什么办法可以解决这个问题吗？提前致谢！

图片 1 图片 2

css

2 个回答

  1. 这是默认换行规则的结果。文本换行时，默认情况下会使用连字符换行，并且只在单词之间换行，这在电子邮件中可能是不必要的。在考虑 white-space 属性时，您走的路有些正确。但是，您正在寻找overflow-wrap 和word-break属性。

    Tailwind 在类下提供了这些break-*，请看这里。您可以根据自己的喜好使用break-words或break-all从规范中使用。

    与word-break 文档的重要区别可帮助您选择：

    注意：与 word-break: break-word 和 overflow-wrap: break-word （请参阅 overflow-wrap）相反，word-break: break-all 将在文本溢出其容器的确切位置创建一个换行符（即使将整个单词放在自己的行上也将不需要换行）。

    • 0
  2. Best Answer

    默认情况下，没有填充：

    a {
    background-color: green;
}
    <a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500">
    [email protected]
  </span>
</a>

    因此，您的代码中存在添加填充的内容。您可以右键单击浏览器中的链接，单击“检查”以打开开发工具并查看 CSS 规则。单击单个元素（例如锚点和跨度），在右侧查看哪些元素具有不需要的填充，找到后，找出哪些规则添加了该填充。

    我创建了一个带有背景颜色和包装 div 的小片段。您可以看到，前两个示例比它们的容器小，并且左右边距没有填充，而最后一个示例太长了，我过去常常word-break: break-all;通过将它们分成多行来处理过长的电子邮件，以防它们溢出。

    div.card a {
    background-color: green;
}

div.card {
    width: 400px;
    border: 1px solid red;
    text-align: center;
    word-break: break-all;
}
    <div class="card">
<a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500">
    [email protected]
  </span>
</a>
</div>
<hr>
<div class="card">
<a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500">
    [email protected]
  </span>
</a>
</div>
<hr>
<div class="card">
<a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500">
    sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss@s.s
  </span>
</a>
</div>

    • 0

相关问题