特殊字符前的换行符答案

【问题标题】：Line break before a special character特殊字符前的换行符
【发布时间】：2014-09-19 09:14:43
【问题描述】：

我使用模板网页，供应商不允许更改系统中的大部分内容。但是我可以访问网络的HTML和CSS，是否可以在“（”字符之前放置一个换行符。CSS或HTML是否足够或者我需要其他编码？

我有类似的 HTML；（该链接的链接和标题来自我无法访问或更改的内联代码）此外，此 HTML 代码是从网站的 CMS 自动生成的，因此它不能像在“（”之前添加中断代码一样更新。换句话说，它不会显示在网站 HTML 中，它从其他地方回忆起我无法更新。因此我需要一个识别“（”字符的编码。并在它前面加上 break。因为它的文本并不总是相同的长度。

 <div class="showcaseTitle">
    <a href="tour_package_ID_0011.html">
        Tour Package (129€)         </a>
</div>

我有类似的 CSS；

.showcaseTitle {
height: 32px;
position: relative;
overflow: hidden;
margin: 0 0 5px;
}

它显示在网站单行的主页上，但我需要将价格放在第二行，如下所示

旅游套餐
(129 欧元)

我该如何解决这个问题？

非常感谢

【问题讨论】：

标签： javascript html css line-breaks

【解决方案1】：

编辑：

如 cmets 中所述，您无法更改 HTML，因此将 comments 中的 Harry 替换为 JS 函数，该函数将所有“(”字符替换为“ <br>(" 因此您将在 "(" 字符之前有一个换行符。

var txt = document.getElementsByClassName('showcaseTitle')[0].innerHTML;

txt = txt.replace(/\(/g, '<br>(');

document.getElementsByClassName('showcaseTitle')[0].innerHTML = txt;

<div class="showcaseTitle">
    <a href="tour_package_ID_0011.html">
        Tour Package (129€)         </a>
</div>

原答案：

由于您可以更改 HTML 标记，最简单的方法是在 HTML 中添加一个换行符，并使用 line break tag (<br/>)：

<div class="showcaseTitle">
    <a href="tour_package_ID_0011.html">
        Tour Package
        <br/> <!-- this line ! -->
        (129€)
    </a>
</div>

【讨论】：

你比我快，+1
RP 免费。看不懂有人不知道<br>普通标签。
@MichaelAdam：在这种情况下，我认为您需要 JavaScript（或其众多库之一）
@MichaelAdam：只要 vanilla JS 就足够了。 Here 是一个非常基本的示例，说明了它是如何完成的，但在现实世界中，您的代码当然必须处理更复杂的情况，而不仅仅是直接替换。
@MichaelAdam：只是为了详细说明我所说的复杂案例的含义。有时您可能有两个 (( 的输入，在这种情况下，这将引入两个换行符。我正在使用innerHTML，因此HTML 标记内容也将进入变量，并且在标记中可能存在您在大括号onclick 中传递值的情况。所有这些都必须额外处理，否则会导致过多的休息。