Support » Plugin: Elementor Website Builder - More than Just a Page Builder » Text Editor Line Height Between Paragraphs

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello GertJan,

    You can set a different line height by going into the Style tab of the text element.
    There click on “Typography” > line height.

    That should do the trick.
    I might be your theme is adding that space by default.

    Hope this helps,
    Annie

    This is likely bottom-margin that is set for paragraphs. By default, text typed into the text editor will be wrapped in p tags (paragraphs) and line-height will only apply when the text wraps to another line or a hard break is used, not after hard carriage returns which separate the text into a new paragraph.

    You can try entering a break tag by pressing “shift + enter” which doesn’t create a new paragraph but forces a line break in which the line-height would control the space between each line within said paragraph.

    <p>line1<br>
    line2</p>

    vs

    <p>line1</p>
    <p>line2</p>

    To add some additional clarity specific to the text editor…

    The text editor borrows from the built-in WordPress editor so it essentially acts the same way where only certain html is allowed and it will sanitize upon saving it. Meaning it will rewrite the code, stripping out anything it doesn’t like and inserting/removing things like line breaks, wrapping text in paragraph tags etc. It’s very hard to make it conform to your own personal formatting unless you really understand how it rewrites the underlying code (any text and/or html) submitted through it.

    This is not Elementor per se but rather how the underlying text editor tool provided by WordPress works.

    It also helps to know that the typography settings only effect paragraphs depending on how strong your underlying theme’s css is written. By default, any text typed into editor will render as a paragraph but the editor interface provides a tool bar to change parts of text into other elements such as headings by simply highlighting said text and choosing one of the many toolbar options.

    Even with paragraphs, sometimes the theme’s styling is too strong and making changes in the style tab of the Elementor text editor Typography does not reflect in the front end view.

    Any other elements you add in the text editor content will likely not style using the Elementor style controls such as headings, lists, images, spans etc. These items will get their style from the underlying theme, sometimes installed plugins or even the browser defaults sometimes come into play.

    If you truly want granular control over the content, without any custom html being changed after you set it, you must use the HTML element, but that totally defeats the purpose of a WYSIWYG editor in the first place right?

    These tools help us get mostly there but they are not perfect for all scenarios in which we must still be creative to get the results we want, often requiring custom html and css.

    Lastly, you can override your theme’s css by inspecting the underlying code and writing your own stronger code.

    For example, give your text element a custom class like “p-margin-bottom-10” drop an HTML element in at the bottom of your page like:

    <style type="text/css">
    .p-margin-bottom-10 p {
      margin-bottom: 10px !important;
    }
    </style>

    If this works, adjust the 10px to whatever suits you better and try removing the !important part and see if it still works. (we only use !important if we absolutely have to)

    <style type="text/css">
    .p-margin-bottom-10 p {
      margin-bottom: 10px;
    }
    </style>

    Best of luck and success to you!

    • This reply was modified 4 years, 5 months ago by pingram.
    Thread Starter Gertjan Devriendt

    (@gertjandevriendt)

    Thanks a lot for this reply!
    I solved the issue by going into my Global Typography setting as you can see here:
    https://gyazo.com/01fc750c90702f2bc26a2f0adb6f9e76

    But I think your explanation would also solve it. Atleast I learned something. Thanks!

    Nice! Glad you got it figured out and happy to help, take care Gertjan!

    Glad you sorted this out!

    Annie

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Text Editor Line Height Between Paragraphs’ is closed to new replies.