css溢出文本处理的几种方法

来源：互联网发布：云服务器开放443端口编辑：程序博客网时间：2024/06/05 19:36

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><style>    .div1 {        height: 100px;        width: 100px;        border: 1px solid gray;        overflow: hidden;        text-overflow: clip;    / / 不显示省略标记，而是简单的裁剪    }    .div2 {        height: 100px;        width: 100px;        border: 1px solid gray;        overflow: hidden;        text-overflow: ellipsis;    / / 超出部分以省略号的方式显示，省略号插入的位置是最后一个字符    }    .div3 {        height: 100px;        width: 100px;        border: 1px solid gray;        overflow: hidden;        white-space: nowrap;    / / 表示强制在同一行显示    }    .div4 {        height: 100px;        width: 100px;        border: 1px solid gray;        overflow: hidden;        white-space: nowrap;        text-overflow: ellipsis;    / / 让文本在同一行显示超出部分显示省略号    }</style><body><div class="div1">    lalalalalalalalallalalalala</div><div class="div2">    lalalalalalalalallalalalala</div><div class="div3">    lalalalalalalalallalalalala</div><div class="div4">    lalalalalalalalallalalalala</div></body></html>

阅读全文

0 0