How to deal with css overflow and line breaks-CSS Tutorial-php.cn

How to deal with css overflow and line breaks

零下一度

Release： 2017-05-03 15:48:45

Original

2912 people have browsed it

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>

Copy after login

二、line break

Note: only valid for English

##:

Normal:

By default, use the browser default form, does not destroy the word structure

break-word:

Destroy the structure of the word

、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>

Copy after login

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!