If you use long words in your Divi fullwidth header module heading you may find that the text gets broken (i.e. "wrapped") in the middle of the word. This is the default behavior of the fullwidth header module when the visible width of a word exceeds the width allocated by the module to the header text.
This can cause readability issues, and look unprofessional. Fortunately, there's a simple custom CSS solution to ensure your fullwidth header module title text wraps at spaces and not within the individual words.
Here's the CSS you need to apply:
.et_pb_fullwidth_header .et_pb_module_header {
word-wrap: normal;
overflow-wrap: normal;
white-space: pre-line;
}Related Post: Adding CSS to the Divi Theme
This ensures that text breaks into new lines at spaces, but doesn't break up individual words.
Alternatively, you can reduce the font-size of the header to ensure that the entire word fits within the area allocated for the heading.
0 Comments