How to deal with css overflow and line breaks

零下一度
Release: 2017-05-03 15:48:45
Original
2899 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:

1clip , cut, cut at the waist

            2, ellipsis, use ... (ellipsis) to represent the undisplayed content

             :

  1. <!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

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!