溢出换行：断词不影响文本

Question

I have this css code

 .LogLink { font-family:courier; white-space: pre; font-size: 11.6px; border: 2px solid rgb(44, 44, 44); background-color:rgb(240, 240, 240); padding:5px; margin-top:5px; margin-bottom:5px; margin-left:20px; margin-right:20px; overflow-wrap: break-word; }

 <h2 style='text-align:center'>LogLink: $BuildID</h2> <p class='LogLink'>[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit [Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit [Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit [Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit.............................................................................................................................................................................................................</p>

This is how it's displayed on my webpage, and that's good enough:

the problem is when I have these long lines of text/symbols:

I thought that overflow-wrap: break-word; would help, but it doesn't do anything. Is there a way to make all the text fit page width, without getting a horizontal scrollbar, but a new line? NOTE: I can't edit the text I receive.

The reason why i use white-space: pre; is to display my received database text. It's received in one line.

EDIT white-space: pre; changed tro white-space: pre-line; worked!

 .LogLink { font-family:courier; white-space: pre-line; font-size: 11.6px; border: 2px solid rgb(44, 44, 44); background-color:rgb(240, 240, 240); padding:5px; margin-top:5px; margin-bottom:5px; margin-left:20px; margin-right:20px; overflow-wrap: break-word; }

 <h2 style='text-align:center'>LogLink: $BuildID</h2> <p class='LogLink'>[Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit [Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit [Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit [Env] Lorem ipsum dolor sit amet, consectetur adipiscing elit.............................................................................................................................................................................................................</p>

Answer 1

try setting a max-width on the container containing the <p> tag, or even on the <p> tag itself. using width and max-width together will allow it to be responsive; width: 400px max-width: 85%

Answer 2

Use white-space: pre-wrap; or white-space: pre-line;

Here's a codepen showing an example with pre-wrap : https://codepen.io/DavidSabine/pen/Exxvybe

And here's the CSS from my example:

.LogLink {
    font-family:courier;
    white-space: pre-wrap;
    font-size: 11.6px;
    border: 2px solid rgb(44, 44, 44);  
    background-color:rgb(240, 240, 240);  
    padding:5px;  
    margin-top:5px;  
    margin-bottom:5px;  
    margin-left:20px;  
    margin-right:20px;  
    overflow-wrap: break-word;
  }

The different between pre-wrap and pre-line is described here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Whether to use pre-wrap or pre-line depends whether you want white space sequences preserved or collapsed. This would largely depend on what your raw output looks like (from your database). I recommend try both. Both are well supported in browsers. See the reports at caniuse.com:

https://caniuse.com/#search=pre-line

https://caniuse.com/#search=pre-wrap