-1

I am retrieving text from a database using php 'echo' to display it, however, the words are cut at the end of a line instead of adding a line break

Code:

    $xx = "<ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</li><li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.</li></ul>";

echo $xx;

The result is:

enter image description here

As you can see, some words are cut when they reach the right margin, for instance, in the first line the word "dapibus" is cut.

How I can prevent this? (php wordwrap does not work here)

Nicoli
  • 643
  • 1
  • 7
  • 23

2 Answers2

2

Use the CSS property word-break with the value keep-all like:

$xx = "<ul style='word-break: keep-all;'><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</li><li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.</li></ul>";

echo $xx;
Tim
  • 5,521
  • 8
  • 36
  • 69
1

This behavior should be caused by a CSS rule:
word-break: break-all;
You could find where this CSS rule is declared and remove it if not needed or else just apply word-break: normal on the <ul> tag

check https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Jacopo
  • 525
  • 3
  • 15