Home >Web Front-end >CSS Tutorial >How to make consecutive numbers and letters wrap in css
How to make consecutive numbers and letters wrap in css
- 藏色散人Original
- 2021-01-11 09:13:045369browse
How to make consecutive numbers and letters break in css: First create an HTML sample file; then use the "word-wrap: break-word;" attribute to force consecutive numbers and letters to break.
The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.
Recommended: css video tutorial
In the div css layout, consecutive English letters or consecutive numbers will line up in the div, p, h2, h1 and other boxes. The row display will not automatically wrap to fit within the box width limit.
Chinese characters will automatically wrap in DIV or any box without CSS style implementation. Only consecutive letters or numbers will have the problem of not wrapping automatically, so CSS is needed to solve it.
Screenshot of the effect of English letters or numbers not wrapping in a DIV and overflowing the DIV:
css forces consecutive numbers and letters to wrap
In CSS, you can use word-wrap: break-word; to force consecutive numbers and letters to break.
The word-wrap attribute allows long content to be automatically wrapped. After setting the break-word value, line wrapping can be performed within long words or URL addresses.
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.divcss5{ border:1px solid #00F; height:120px; width:200px;word-wrap:break-word}
</style>
</head>
<body>
<div class="divcss5">
aabbfjdlkfldsjfldsjfldjfljdlafjldsjflkdjflkdsjfldfjdlj<br />
138787843748927493274392749327493
</div>
</body>
</html>Rendering:
The above is the detailed content of How to make consecutive numbers and letters wrap in css. For more information, please follow other related articles on the PHP Chinese website!