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

古城微笑少年丶 2021-09-14 07:48 398阅读 0赞

<!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 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

相关纯CSS实现“文本溢出截断省略”的几种方法

单行文本溢出省略核心 CSS 语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文

矫情吗；*/ 2023年07月19日 10:41/ 0 赞/ 21 阅读

相关 CSS-文本溢出的显示效果，如何处理溢出的部分，空白部分的处理，如何实现单行文本溢出显示省略号

text-overflow `text-overflow` 设置在文本溢出时的显示效果 <table> <thead> <tr> <th>属性值</t

青旅半醒/ 2023年06月08日 06:28/ 0 赞/ 14 阅读

相关 CSS文本垂直居中的几种方法

[观看更佳-点击前往][-] 一、单行文本的居中 1.文字水平居中 <div class='box' style="tex

青旅半醒/ 2022年12月13日 14:02/ 0 赞/ 313 阅读

相关 Bert 处理文本的几种方法

LawsonAbs的认知与思考，望各位读者审慎阅读。总结文章来源：CSDN\_LawsonAbs 持续更新~ --------------------

ゞ浴缸里的玫瑰/ 2022年11月06日 07:56/ 0 赞/ 193 阅读

相关 css_文本溢出

1) 文本单行文本单行：设置文本不换行，元素无法容纳的文本会溢出。语法： text-wrap: none; 此属性为css3中的属性，目前主流浏览器都不支持。如

爱被打了一巴掌/ 2022年05月25日 05:07/ 0 赞/ 261 阅读

相关 CSS文本溢出显示省略号

1单行 overflow:hidden; text-overflow:ellipsis; white-space:nowrap

缺乏、安全感/ 2022年04月23日 04:08/ 0 赞/ 312 阅读

相关 CSS 文本溢出省略显示

实现文本显示单行或多行，超出部分用省略号显示是一个很常见的需求，在这里做个分享记录。(文末有 demo 演示~) 单行溢出缩略下面是单行缩略的实现： ove

男娘i/ 2022年04月14日 20:29/ 0 赞/ 336 阅读

相关文本溢出处理

在做京东首页时，遇到京东新闻那一块，文本溢出需求做…处理京东效果图 ![....][] html代码 <div class="jd_new

灰太狼/ 2022年02月05日 02:17/ 0 赞/ 313 阅读

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2021年09月14日 07:48/ 0 赞/ 399 阅读

相关 CSS文本溢出显示省略号

单行语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例

红太狼/ 2021年01月27日 16:34/ 0 赞/ 801 阅读