CSS自动换行、强制不换行、强制断行、超出显示省略号

标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果，但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，但是并没有发现本质原因，本质在于，我当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。

先给出各种方式，再具体介绍每一个属性。

强制不换行

p { white-space:nowrap; }

自动换行

p { word-wrap:break-word; }

强制英文单词断行

p { word-break:break-all; }

*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

超出显示省略号

p{text-overflow:ellipsis;overflow:hidden;}

white-space 属性设置如何处理元素内的空白

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

word-wrap: normal|break-word;

word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

normal: 只在允许的断字点换行(浏览器保持默认处理)

break-word:在长单词或URL地址内部进行换行

word-break: normal|break-all|keep-all;

word-break 属性用来标明怎么样进行单词内的断句。

normal：使用浏览器默认的换行规则。

break-all:允许再单词内换行

keep-all:只能在半角空格或连字符处换行

举例看起区别：

<!doctype html>

<head>

<title>Document</title>

<style>

.word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}

/* 强制不换行 */

.nowrap{white-space:nowrap;}

/* 允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，

不够的话就进行单词内的断句 */

.breakword{word-wrap: break-word;}

/* 断句时，不会把长单词挪到下一行，而是直接进行单词内的断句 */

.breakAll{word-break:break-all;}

/* 超出部分显示省略号 */

.ellipsis{text-overflow:ellipsis;overflow:hidden;}

</style>

</head>

<body>

<p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>

<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>

<p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>

<p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>

<p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>

</div>

</body>

</html>

效果如下：

绍得比较粗略,大家只要有个印象就可以,后边我们会在详细的在具体的前段开发项目中来讲解.

一 css3伪类

css3中的伪类允许我们在不适用于JavaScript等脚本的情况下去设置web页面中某些特定的元素的属性.

伪类通常以":"(冒号)开头. :first-child和:last-child是较为常用的伪类.

:first-child将会匹配该元素中的第一个子元素.

html代码:

<p>又见雪飘过</p>

<p>飘于伤心记忆中</p>

<p>让我再想你</p>

<p>却掀起我的痛</p>

</div>

css代码:

#parent p:first-child{color:green; text-decoration:underline; }

执行结果如下:

:last-child则是选取最后一个元素.

二伪元素

伪元素用于选取元素的特定部分.

在css中有五个伪元素,每个都以一个双冒号(::)开头

::first-line 选择器中文本的第一行

::first-letter 选择器中文本的第一个字母

::selection 选择用户选择的元素部分

::before 在元素之前插入一些内容

::after 在元素之后插入一些内容

在下面的例子中,::first-line伪元素用于为文本的第一行设置样式.

html代码:

<p>早经分了手

<br>为何热爱尚情重

<br>独过追忆岁月

<br>或许此生不会懂</p>

</div>

css代码:

#parent1 p::first-line{color:#AE4141;}

效果如下:

::selection伪元素用于对选定的文本进行设置样式.

css代码:

#parent1 p::-webkit-selection{background:#AE4141; color:#fff;}

#parent1 p::selection{background:#AE4141; color:#fff;}

效果如下:

使用了浏览器前缀-webkit-.有的浏览器会不支持::seleciton伪元素

使用::before和::after伪元素允许我们向页面添加各种各样的内容.

在下面的例子中,::before伪元素用于在段落之前添加图像.

html代码:

<p>又再想起你</p>

<p>抱拥飘飘白雪中</p>

<p>让你心中暖</p>

<p>去驱走我冰冻</p>

</div>

css代码:

div.parent p::before{ content:url("before.jpg");}

效果如下:

请注意样式中使用的content关键字

::after则会在末尾增加样式.

三 css3自动换行

word-wrap属性允许对长单词进行自动换行处理.它有两个属性值:normal和break-word.

html代码:

<p id="word-wrap">冷风催我醒,原来共你是场梦,像那飘飘雪泪下,弄湿冷清的晚空.原来是那么深爱你.</p>

css代码:

#word-wrap{width:100px; height:100px; border:2px solid #000000; word-wrap:normal; }

效果如下:

由于是段落内容是中文,所以word-wrap:normal; 和word-wrap:break-word; 效果是一样的都会自动换行.

四 @font-face

@font-face允许将自定义字体加载到网页中.借助于此规则,设计不再局限于安装在用户计算机上的字体

在IE8和更低版本中,url必须指向Embedded OpenType(eot)文件,而firefox,chrome等支持True Type(ttf)字体和OpenType(otf)字体.

定义一个名为"text"的新字体

@font-face{font-family:"text"; src:url("text.otf"); }

然后这个新的字体可以使用了如p{font-family:text;}

我们在定义列表时，我们通常想得到如下的效果：

下面是我们的html代码：

  <dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
  </dl>

实际得到的效果是

当我们想得到最上面的效果时，第一步通常是：

  <style>
    dd{
      margin: 0;
      font-weight: bold;
    }
  </style>

因为<dt>和<dd>是块级元素，所以所有的名和值都各占一行，我们可能通过改变<dt>或<dd>的display属性来做尝试：

    dd, dt{
      display: inline;
    }

解决方案

如上，我们缺少几个换行

实际上有一个Unicode字符专门代表换行符：0x000A。在CSS中，我们可以用"\A"表示，我们可以把它作为::after伪元素的内容，添加到dd的尾部，但是你会发现并没有什么作用，但这并不代表我们错了，而是在HTML代码中，默认情况下换行符会与相邻的其他空白符进行合并，我们这里保留源代码中的这些空白符和换行，因此我们这么做：

    dd, dt{
      display: inline;
    }

    dd::after{
      content: "\A";
      white-space: pre;
    }

    dd{
      margin: 0;
      font-weight: bold;
    }

很明显，我们已经得到了我们想要的效果，不过如果我们尝试如下时：

由于我们在每个dd后面都加了一个换行符，每个值都会分到单独一行，甚至不需要换行的时候也是如此。因此我们需要采取类似if else的判断：

    dd + dt::before{
      content: "\A";
      white-space: pre;
    }

    dd + dd::before{
      content: ', ';
      font-weight: normal;
      margin-left: -.25em;
    }

另外上述的margin是为了修正逗号前的空格，尺寸是需要根据字体个尺寸调试的。

在线咨询

上一篇：CSS 表单美化-outstyle
下一篇：面试官：你能基于React/Vue手写一个全局提示(Message)组件吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS自动换行、强制不换行、强制断行、超出显示省略号

解决方案

您的项目需求