1. Overflow processing
1, processing blanks
When the text is too long and cannot be displayed in the container, whether to wrap the line
Properties: white-space : normal / nowrap
normal : Adopt browser default settings
nowrap : No line breaks
2、Text overflow
How to deal with overflow,If you want to hide the overflow content, Consider using this attribute.
Note: This attribute must be used in conjunction with overflow:hidden
Attribute : text-overflow
Value:
1、clip , cut, cut at the waist
2, ellipsis, use ... (ellipsis) to represent the undisplayed content
:
<!DOCTYPE html > <head> <title>文本格式</title> <meta charset="utf-8" /> <style> p{ width:150px; height:50px; border:1px solid black; overflow:hidden; } #d1{ white-space:normal; text-overflow:ellipsis; } #d2{ white-space:nowrap; text-overflow:clip; } #d3{ white-space:nowrap; text-overflow:ellipsis; } </style> </head> <body> <p id="d1">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/> <p id="d2">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/> <p id="d3">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p> </body> </html>
二、line break
Note: only valid for English
1
##: Normal:By default, use the browser default form, does not destroy the word structure
break-word:Destroy the structure of the word
2、Text line break
Word-break: Value: normal: Break-All:Destroy the word structure to change the line
Keep-all:In the space in the half-angle state, change the line
<!DOCTYPE html > <head> <title>文本格式</title> <meta charset="utf-8" /> <style> p{ width:150px; height:50px; border:1px solid black; } #d1{ word-wrap:break-word; } #d2{ word-break:break-all; } #d3{ word-break:keep-all; } </style> </head> <body> <p id="d1">this is a longlonglonglonglongtext,如何换行?</p><br/><br/> <p id="d2">this is a longlonglonglonglongtext,如何换行?</p><br/><br/> <p id="d3">this is a longlonglonglonglongtext,如何换行?</p> </body> </html>
The above is the detailed content of How to deal with css overflow and line breaks. For more information, please follow other related articles on the PHP Chinese website!