- Issue created by @giordy
- 🇮🇳India Tirupati_Singh
Hi @giordy, the
line-height
css propety is working fine but due to the use of<br>
tag after every<q>
tag is preventing the appearance of line-height as the<br>
tag is also taking17px height
for itself. So, you can remove the<br>
tag after every<q>
tag and set the<q>
tag todisplay: block
to render all the<q>
tag in anew line
and then you can set theline-height
as per your requirement. And it is usually bad practice to use!important
in css.. You can set line-height without using the!important
.#page-wrapper .sidebar-box-main q { line-height: 22px; display: block; }
<p class="text-align-center"><q><strong>Nebulosa oscura Testa di Cavallo B33 </strong></q><q><strong>La nebulosa planetaria NGC 6720 </strong></q><q><strong>Nebulosa a emissione Trifida NGC 6514 </strong></q><q><strong>Nebulosa a riflessione NGC 1999 </strong></q><q><strong>Nebulosa da supernova del Granchio NGC 1952 </strong></q></p>
- 🇮🇹Italy giordy
Thanks for the quick reply. If I delete
br
, the text doesn't wrap.
https://prova.gmpe.it/astronomia/nebuloseThanks and best regards
- 🇮🇳India Manishvijay02
Hi @giordy,
I have also checked it. The line-height property is working fine. If the text is not wrapping after removing the < br > tag, you can use the text-wrap: wrap property. Doing this should solve your problem. - 🇮🇹Italy giordy
1
I see as in fig. 12
The q tag is not deleted and display block wraps the text (fig. 2).
https://prova.gmpe.it/fisica/statica
at the bottom of the page. - 🇮🇳India Tirupati_Singh
@giordy, please use this HTML code if you want to display elements as mentioned in the attached screenshot.
<p class="text-align-center"> <q><strong>Nebulosa oscura Testa di Cavallo B33</strong></q> <q><strong>La nebulosa planetaria NGC 6720</strong></q> <q><strong>Nebulosa a emissione Trifida NGC 6514</strong></q> <q><strong>Nebulosa a riflessione NGC 1999</strong></q> <q><strong>Nebulosa da supernova del Granchio NGC 1952</strong></q> </p>
To display all the
<q>
content in anew
line you will have to use multiple<q>
tags. I've gone through the current HTML in the page https://prova.gmpe.it/astronomia/nebulose<p class="text-align-center"> <q> <strong>Nebulosa oscura Testa di Cavallo B33</strong> <strong>La nebulosa planetaria NGC 6720Nebulosa a emissione Trifida NGC 6514Nebulosa a riflessione NGC 1999Nebulosa da supernova del Granchio NGC 1952</strong> </q> </p>
Here you've used only a single
<q>
tag that's why content is rendering on the same line line. - 🇮🇹Italy giordy
Thank you. It works for this page, but I can't use
display:block
because it's not good for all other pages.
Ckeditor 5 introducesq
whenever it encounters any other tag and not justbr
.If I have this with cke4:
<p> <q>Lorem ipsum dolor sit amet consectetuer id velit dui <strong>Quisque </strong>at.<br /> Phasellus <strong>fames </strong>massa Duis urna gravida Nam elit pellentesque tempor <em>pretium</em>.<br /> Consequat id <u>Curabitur </u>sem sem Phasellus et Nulla.</q> </p>
With cke5 it becomes:
<p> <q>Lorem ipsum dolor sit amet consectetuer id velit dui <strong>Quisque </strong>at.</q><br> <q>Phasellus <strong>fames </strong>massa Duis urna gravida Nam elit pellentesque tempor </q><em><q>pretium</q></em><q>.</q><br> <q>Consequat id <u>Curabitur </u>sem sem Phasellus et Nulla.</q> </p>
The result is in fig. 3
Thanks and best regards
- Status changed to Fixed
2 months ago 3:06pm 7 July 2024 - 🇺🇸United States flashwebcenter Austin TX
Hello,
It works for this page, but I can't use display:block because it's not good for all other pages.
You should be able to inspect the page and apply CSS to a specific page. By default, Drupal adds a class name to the body tag that includes the content type and the node ID.
Ex: https://prova.gmpe.it/astronomia/nebulose.path-node-1683 #page-wrapper .sidebar-box-main q { line-height: 22px; display: block; }
Best wishes,
Alaa - 🇮🇹Italy giordy
Thanks, it could be a solution if I didn't have at least fifty pages with different characteristics.
The real solution should come from ckeditor 5. I tried to write, but I didn't get any response:
https://www.drupal.org/project/drupal/issues/3458454 🐛 Problem with the q tag Active
At this point I'd better leave it like this.Thank you so much and best regards
Automatically closed - issue fixed for 2 weeks with no activity.