Solve the problems of English word overflow / word break in WordPress articles

A lot of times ,WordPress Chinese themes may be developed , Missed the optimization of the English typesetting of the article , There are several situations ：

1. Long English 、 Long link , Overflow exceeds the display range , No newline
2. When English words break lines , When the word breaks

Solve the above two problems , There were 2 Set of plans .

Word wrap

word-wrap: break-word; 
word-break: normal;

English words don't take apart words

word-break: keep-all;  // Line breaks are only allowed at half space or hyphen .
word-wrap: break-word; // When the word is too long , Try wrapping first , It is still too long after the line break , You can also wrap lines inside words .
white-space: pre-wrap; // Keep all spaces and carriage returns , However, line folding is allowed , Be careful ： When a lot of white space appears , Not to add .

Generally speaking , It needs to be in the style sheet belonging to the content of the article , Add the following css style , Can solve .

Align English words 、 The word does not break the line

word-break: keep-all; 
word-wrap: break-word; 
white-space: pre-wrap;
text-align: justify;

Take a chestnut

If you are using the same theme ：PandaPRO The theme , Or it happens to have a building block plug-in installed , Then you can do this without changing the theme file code , Complete the transformation .

First , Find the outer layer of the article p Style label for ：.post-content p, .post-content figure In building block optimization settings , find Customize modular , stay Header custom code Insert style code in , Here's the picture ：

.post-content p,
.post-content figure {
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}

preservation , Return to the website article page , After clearing the browser cache , Refresh the website , have a look , Is it working .