How to make the whole English word not wrap in css

css How to implement the entire English word without line breaks: 1. Control line breaks through the css attribute "word-wrap:break-word;"; 2. Control through the css attribute "word-break:break-all;" Word segmentation is enough.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

css How to realize that the entire English word does not wrap?

#The problem of word wrapping in English and Chinese in css

The problem of word wrapping

Sometimes you encounter very long English words in the project Sentence, and then when the remaining part of the div is not enough to hold a word, the word will be displayed in a new line. In this case, the end will be empty and the space will look ugly.

Solution

This requirement can be achieved through two css attributes:

word-wrap:break-word;
word-break:break-all;

word-wrap

word-wrap is used to control line breaks, there are Two values:

+ normal
+ break-word(这个值用来强制换行的，内容将在边界内换行，在中文中是没有任何问题，英文语句也是没有任何问题，但是对于很长的英文来说就不起作用了)

word-break

word-break is used to control how words are segmented. There are three values:

+ break-all（是断开单词，在单词到边界的时候，下个字幕自动到下一行，主要是解决了长串英文单词断词的问题）
+ keep-all(指的是不断词，一句话就是一行)

Recommended learning: "css video tutorial"

The above is the detailed content of How to make the whole English word not wrap in css. For more information, please follow other related articles on the PHP Chinese website!