Line break before a special character

Question

I use a template webpage, and supplier does not give permission to change most thing in system. But I can reach HTML and CSS of the web, Is it possible to put a line break before "(" character. Is CSS or HTML enough or do I need another coding?

I have HTML like; (Link and Title of that link comming from inline code that i cannot reach or change) Moreover, This HTML code generated automatically from CMS of website, therefore it cannot be update like adding break code before "(". In otherwords, it will not shown in website HTML, it recalled from somewhere else that i cannot update. Therefore I need a coding that recognize "(" char. and put break before it. because text of it not always same length.

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

I have CSS like;

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

It shows on main page of website single line but i need to put the price on second line like below

Tour Package
(129€)

How can i solve this problem ?

Thank you very much

Answer 1

EDIT :

As mentioned in the comments, you can't change the HTML so thx to Harry in the comments here is a JS function that replaces all " ( " characters by " <br>( " therefore you will have a line break before the "(" character.

 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> 

---

Original answer :

As you can change the HTML markup, the simplest would be to add a line break in the HTML with the line break tag ( <br/> ) :

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