Use word-wrap: break-word to automatically wrap text

Text Box continuous input
Number "111111111111111111" or
The English word "adkjsakfjsalfkjsalkdjaslkfjsalkf"
What will happen? --- Text overflow. The general solution is to use overflow: hidden to hide text. Is there a better solution to text? For children's shoes of QA, automatic line breaks are required.

Use word-wrap: break-word.

Explanation in the css Manual
Word-wrap
Basic Features
Compatibility: IE5.5 + private attributes
Basic syntax
Word-wrap: normal | break-word
Syntax Value
Normal: default value. Allows the content to expand the specified container Boundary
Break-word: the content will wrap in the boundary. If necessary, the line feed (word-break) will also occur.
Instructions for use
Sets or retrieves whether to disconnect the dashboard when the forward time exceeds the boundary of the specified container. This attribute only applies to layout objects, such as block objects. To use this attribute for inline elements, you must first set the height or width attribute of the object, set the position attribute to absolute, or set the display attribute to block. This attribute is read-only for currentStyle objects. Other objects can be read and written. The corresponding script feature is wordWrap.

W3c explanation

Http://www.w3.org/TR/css3-text/#word-wrap