在 Wordpress 中换行的正确方法 <br>

Posted 2023-03-05

【中文标题】在 Wordpress 中换行的正确方法 <br>

【英文标题】：The Correct Way to Line Break <br> in Wordpress

【发布时间】：2020-10-10 06:48:50

【问题描述】：

我想在文本中的特定点将 WordPress 网站标题换行成两行。

由于 WordPress 内容过滤器“wpautop”，<br> 标签（又名<br/> 或<br />）似乎在整个站点范围内被禁用。我了解禁用标签背后的动机，但我想知道什么是用 CSS 代替传统标签的“正确”换行方式。

为了澄清，我想在没有<br> 标签的情况下实现这一点：

<a href="https://example.com/">This is a<br>Site Title</a>

编辑：理想情况下，我无需使用标记对站点标题进行硬编码即可实现此功能，因此用户仍然可以在管理设置中修改标题。例如，有没有办法在第 n 个单词或第 n 个字符后用 CSS 换行？

【问题讨论】：

你可以这样做<a href="https://example.com/"><span style="display: block">This is a</span><span>Site Title</span></a>。或者你可以使用这些想法之一***.com/questions/2703601/…

事实证明，如果不对主题中的标题进行硬编码，我就无法获得任何标记来与标题打球，我不愿意这样做，因为我想离开它方便使用的。我的问题应该更清楚；我将添加一个编辑。感谢您的参考，它给了我一些想法。

你也可以使用 CSS 来设置 display: inline-block 并将 width 固定到你的 .title 元素上，使其以一定的宽度换行

这是我目前确定的解决方案。我在每个媒体查询中断处设置了固定的 rem 宽度和字体大小，并且效果很好。我最初希望能够单独设置单词样式以形成一个响应式 SEO 友好徽标，并且默认管理控制完好无损，但我已经接受这是在没有“断开”管理标题设置的情况下对 WordPress 提出的要求太多。标题范围的样式和“自然”包装是妥协。感谢您的意见，它使我回到了拖延的进步之路！

【参考方案1】：

所以答案是，目前没有简单的方法允许在 WP 标题中使用换行符。我最终编写了自己的主题，这是我试图避免的，因此提出了这个问题。

一点背景：许多网站徽标都将文本“嵌入”到图像中，然后使用元数据/属性处理事物的 SEO 方面。我希望允许用户通过前端输入添加自己的标题，例如 WP 的“自定义主题”编辑器，然后使其成为徽标的一部分和对 SEO 友好的 h1。

我的解决方案对于带有真实文本的徽标如下。我放弃了基本用户输入的想法，但这确实产生了一个非常好的、完全响应的 SEO 友好徽标。

a 
  text-decoration: none;
  font-size: 1.8rem;


img 
  text-align: center;
  padding: 15%


#divHeaderLogo 
  display: flex;
  min-width: 24rem;


#divLogoImage 
  border-style: dotted;
  width: 8rem;
  height: 8rem;


#divLogoText 
  min-width: 16rem;


#logoTextLine2 
  font-size: 2.5rem;

<div id="divHeaderLogo">
  <div id="divLogoImage">
    <img src="" >
  </div>
  <div id="divLogoText">
    <h1>
      <a href="#">Here's a Wrapping <div id="logoTextLine2">Logo Title</div></a>
    </h1>
  </div>
</div>