Search code examples
htmlcssprettier

How to remove issue with extra white space using CSS or HTML?

I am developing application in Nuxt/Vue and my texts are coming from i18n, some of the texts have got regex line breaks inside \n and if I want to display this correctly I am forced to use CSS white-space: pre-line property but when I do so every enter created during formating code by prettier adds me extra line before any element (only spans are working properly) but in this case I need <h4> element.

<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

Is there any chance to remove this extra white space from rendering and have fully working white-space: pre-line property?

EDIT

  1. I know this works (I've added it to example):

<h4>Lorem Ipsum sit Dolores</h4>

  1. I am forced to use pre-line because some of texts are coming from BE and they have some break lines inside

  2. Prettier doesn't allow me to format it in one line and I cannot disable prettier. Prettier forwards me the text to the new line automatically

h4 {
  border: 1px solid goldenrod;
  white-space: pre-line;
}
<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

Solution

  • Solution 1: You can make prettier ignore that specific tag like this:

    <!-- prettier-ignore -->
<h4>Lorem ipsum sit dolores</h4>

    Solution 2: Another hacky way that could possibly work (untested). I think prettier won't align the tag in this case.

    h4 {
  white-space: pre-line;
  border: 1px solid goldenrod;
}

h4::after {
  content: "This is a title";
}
    <h4></h4>