Line height in q tag

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 taking 17px height for itself. So, you can remove the <br> tag after every <q> tag and set the <q> tag to display: block to render all the <q> tag in a new line and then you can set the line-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&nbsp;</strong></q><q><strong>La nebulosa planetaria NGC 6720&nbsp;</strong></q><q><strong>Nebulosa a emissione Trifida NGC 6514&nbsp;</strong></q><q><strong>Nebulosa a riflessione NGC 1999&nbsp;</strong></q><q><strong>Nebulosa da supernova del Granchio NGC 1952&nbsp;</strong></q></p>

Thanks for the quick reply. If I delete br, the text doesn't wrap.
https://prova.gmpe.it/astronomia/nebulose

Thanks and best regards

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.

1
I see as in fig. 1

2
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.

@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 a new 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.

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 introduces q whenever it encounters any other tag and not just br.

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

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

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.