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

Home

Web Front-end

CSS Tutorial

How to deal with css overflow and line breaks

May 03, 2017 pm 03:48 PM

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

：

&lt;!DOCTYPE html &gt;
&lt;head&gt;
  &lt;title&gt;文本格式&lt;/title&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
   &lt;style&gt;
     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;
}
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;p id=&quot;d1&quot;&gt;longlonglonglonglonglonglonglonglonglong无法在框中容纳&lt;/p&gt;&lt;br/&gt;
   &lt;p id=&quot;d2&quot;&gt;longlonglonglonglonglonglonglonglonglong无法在框中容纳&lt;/p&gt;&lt;br/&gt;
   &lt;p id=&quot;d3&quot;&gt;longlonglonglonglonglonglonglonglonglong无法在框中容纳&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

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

&lt;!DOCTYPE html &gt;
&lt;head&gt;
  &lt;title&gt;文本格式&lt;/title&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
   &lt;style&gt;
     p{
        width:150px;
height:50px;
border:1px solid black;
}
     #d1{
       word-wrap:break-word;
}
#d2{
       word-break:break-all;
}
#d3{
       word-break:keep-all;
}
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p id=&quot;d1&quot;&gt;this is a longlonglonglonglongtext,如何换行？&lt;/p&gt;&lt;br/&gt;&lt;br/&gt;
&lt;p id=&quot;d2&quot;&gt;this is a longlonglonglonglongtext,如何换行？&lt;/p&gt;&lt;br/&gt;&lt;br/&gt;
&lt;p id=&quot;d3&quot;&gt;this is a longlonglonglonglongtext,如何换行？&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

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!

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