In css, word-break can solve this problem. Write a test page to take notes. css code: body {font-size: 14px;} p {border: solid 1px red; width: 200px ;} <body> <p class = "test"> English Chinese English Englis333hEnglishEnglishEnglish Chinese chinese characters 123 ewewee 123 running nglishEnglish </p> </body> The effect is as stated in the topic. The following Code adds a style css to the p Tag :. test {word-break: break-all;} You can find that all texts, whether Chinese or English, or numbers, can be automatically forcibly transferred at the end of the p tag of the package, there will be a problem. We will split the character string that is originally a combination to see the effect, and then look at the css code :. test {word-break: hyphenate;} This css may break the character segment of the package element and start line feed at the break point. Then read the css code :. test {word-break: keep-all;} breaks a line at spaces between all character segments and retains the integrity of all character segments. The broken package element word-break has some attributes: css code :. test {word-break: normal;}/* default line feed in the browser */if you do not need to maintain word integrity, break-all can solve the container-breaking problem, because there is no word with a length that exceeds the width of a container in actual application, hyphenate can solve the problem that words must be complete and cannot be broken through the container, in some scenarios, you can use a scroll bar or overflow: hidden to keep the UI complete.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
