Home >Web Front-end >CSS Tutorial >How to deal with css overflow and line breaks

How to deal with css overflow and line breaks

零下一度Original: 2017-05-03 15:48:452962browse

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

##:

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>

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!

Statement：

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

Previous article：Share a CSS special effect code that makes the entire site grayNext article：Share a CSS special effect code that makes the entire site gray

See more

How to deal with css overflow and line breaks

Related articles