Display original text with line breaks inside <a> tag

Asked

Viewed 60 times

1

I’m trying to put a text with more than a paragraph as a link, but the display within the tag <a> removes the line breaks in the text. I’m doing it this way:

<a style="cursor: pointer;" onclick="wpquery_link_filter(' <?= preg_replace('/\s+/', ' ', $value) ?> ', <?= $property['id'] ?>)">
    <?= $value ?>
</a>

I’m getting something like this:

Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Integer without magna, eleifend id hendrerit vel, imperdiet sit Amet ligula. Cras eleifend quam vel ex fringilla fringilla. Phasellus at nibh eget lorem ullamcorper faucibus tristique eu purus. Donec wanted turpis door, posuere mauris wanted, Lementum an urn. Nunc Maximus neque feugiat, pretium eros egestas, just varius. Proin accumsan Fringilla sapien ut varius. Cras non finibus nisi, eu pretium Lacus. Pellentesque Elementum Maximus erat ut posuere. Vivamus elementum mauris et nisl ullamcorper, quis suscipit ipsum tempor. Proin sit amet dolor quam. Cras mattis malesuada dui. Morbi ac massa a odio facilisis vehicula. Sed a diam sed nisl egestas fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum varius nec nibh at hendrerit. Quisque augue urna, lobortis ut Cursus sed, Bibendum sed Orci. Donec Maximus, erat ut Elentum porttitor, erat Elit Fringilla enim, at imperdiet odio urna nec lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut vitae sem dignissim, consequat metus non, vehicula augue. Donec wanted nisl sit Amet erat auctor Tempus. Proin at sollicitudin turpis, sit Amet vestibulum leo. Nunc Tellus erat, consectetur a posuere non, aliquet id sem.

How can I make the display remain as the original text?

1 answer

2

The problem occurs that line breaks in the text are not rendered as line breaks in html, for this there is the tag <br>. What you need to do is convert the line breaks of the variable $value for the tag <br>.

As the text comes from a PHP variable, there is the native function nl2br that does just that. You check the documentation of this function here, and its code with the function just below:

<a style="cursor: pointer;" onclick="wpquery_link_filter(' <?= preg_replace('/\s+/', ' ', $value) ?> ', <?= $property['id'] ?>)">
    <?= nl2br($value) ?>
</a>
  • Thanks for the tip, after searching more I found a way to do using a CSS property. Property white-space: pre-wrap, but your solution would also work.

  • 1

    actually, it can use the <pre> tag with the link inside

Browser other questions tagged

You are not signed in. Login or sign up in order to post.