Search code examples
javascripthtmlcssdomhandlebars.js

Is it possible to import string, split it to words, and display it on 3 different stacked rows using CSS only?

I am working on my friend's website on cargocollective.com. on the Admin panel, there is a place to insert project names, afterward, you can display them as the thumbnails titles.

This is how it looks now
(the text should be:
Bright Diamonds, 3 hyphens, Branding, Web Design, Art Direction - same as in the 2'nd photo).

and beneath, how it should look after modification: enter image description here

I've got access to modify her CSS file and to insert HTML content.
(Imho - The HTML part is a little bit sketchy to use and the documentation suffers from a lack of examples to explain the usage.) and I made this script:

Cargo.Event.on("homepage_loaded", function() {
   let titles = document.querySelectorAll("div.title");
   let titleArr;
   titles.forEach(el => {
      titleArr = el.innerText.split("|");
      el.innerHTML = `${titleArr[0]}<br>${titleArr[1]}<br>${titleArr[2]}`;
   });
});

Cargo.Event.trigger("homepage_loaded");

When I added:

titles[0].innerText = "Bright Diamonds|---|Branding, Web Design, Art Direction";

It worked in my browser but when I tried it over the system, the script refused to run.

My question is if the is another way to create the title as needed.

I added the: .thumbnails .title provided by cargo:

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: 0.1rem;
    font-size: 2.2rem;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Neue Haas Grotesk', Icons /*!Persona*/;
    font-style: normal;
    line-height: 1.3;
}

Thanks in advance

Solution

  • The solution in my case (only cosmetic) was in my CSS file:

    (it is not mandatory to customize the width, but in case you want to, do it with: display: inline-block as described below):

    white-space: pre-wrap;
overflow-wrap: break-word;
display: inline-block;
width: 40%;