Можно ли импортировать строку, разбивать ее на слова и отображать ее на 3 разных рядах, используя только CSS? - PullRequest
Новая
       3

Можно ли импортировать строку, разбивать ее на слова и отображать ее на 3 разных рядах, используя только CSS?

0 голосов
/ 26 января 2020

Я работаю на сайте моего друга на cargocollective.com. на панели администратора есть место для вставки имен проектов, после чего вы можете отображать их в виде миниатюр.

Вот как это выглядит сейчас
(текст должен быть:
Яркие бриллианты , 3 дефиса , Брендинг, веб-дизайн, художественное оформление - так же, как на 2-й фотографии).

и далее, как это должно выглядеть после модификации: enter image description here

У меня есть доступ, чтобы изменить ее CSS файл и вставить HTML содержимое.
(Imho - часть HTML немного схематична для использования, а документация страдает от недостатка примеров, объясняющих использование.) И я сделал этот скрипт: 

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");

Когда я добавлено: 

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

Это сработало в моем браузере, но когда я попробовал его в системе, скрипт отказался запускаться.

У меня вопрос, есть ли другой способ создать заголовок как необходимо.

Я добавил: .thumbnails .title, предоставляемый автомобилем go: 

.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;
}

Заранее спасибо

1 Ответ

0 голосов
/ 29 января 2020

Решение в моем случае ( only cosmeti c) было в моем файле CSS:

(настраивать ширину не обязательно, но в случае, если вы хотите сделать это с помощью: дисплей: встроенный блок , как описано ниже): 

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