ellipsis单行文本和-webkit-box多行文本超出部分显示省略号

用到了单行文本与多行文本超出部分显示省略号,记录一下笔记。

1.单行文本显示省略号

代码这样写文本会超出红线边框:


<html>
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>超出部分显示省略号title>
        <style type="text/css">
            p{
                width:100px;//宽度
                height:55px;//高度
                border:1px solid red;//边框
            }
        style>
    head>
    <body>
        <p>ellipsis单行文本和-webkit-box多行文本超出部分显示省略号p>
    body>
html>

没有设定时文本会超出红线边框:
ellipsis单行文本和-webkit-box多行文本超出部分显示省略号_第1张图片

如果想使文本变成一行,超出部分显示省略号,则给p增加ellipsis和hidden样式:

p{
    width:100px;//宽度
    height:55px;//高度
    border:1px solid red;//边框
    text-overflow:ellipsis;//设定修剪方式
    white-space:nowrap; //设定换行方式,nowrap表示不换行
    overflow:hidden;//设定超出规定宽高部分则隐藏
}

效果:
这里写图片描述

2.多行文本显示省略号

上面的方法只能使用在单行文本,在多行文本时没有效果的,如果想使多行文本超出部分显示省略号,则需要使用另外一种方式,把上面的代码改成如下面的的代码就可以有超出部分显示省略的效果。

p{
    width:100px;//宽度
    height:55px;//高度
    border:1px solid red;//边框
    overflow:hidden;//超出部分隐藏
    display:-webkit-box;//设置盒子样式,-webkit-是兼容前缀
    -webkit-box-orient:vertical;//设置盒子参考方式
    -webkit-line-clamp:3;//设置超出多少行显示省略号
}

效果:
这里写图片描述

你可能感兴趣的:(html+css)