美文网首页
文本处理常见问题

文本处理常见问题

作者: dosher_多舍 | 来源:发表于2018-12-13 00:01 被阅读0次

    首行缩进

    text-indent 属性规定文本块中首行文本的缩进。

    注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。

    属性值:

    • (length) 定义固定的缩进,默认 0 ,单位可以是 pxemrem。文段文字缩进建议采用em为单位,要缩进刚好2个文字空格间距,字体大小发生改变时,缩进效果保持一致。
    • (%) 定义基于父元素宽度的百分比的缩进。
    • inherit 规定应该从父元素继承 text-indent 属性的值。

    文字溢出省略

    单行文字溢出

    overflow: hidden;  // 超出隐藏
    text-overflow: ellipsis; // 文字溢出显示省略号
    white-space: nowrap; // 文字不换行
    

    多行文字溢出

    WebKit内核存在一个私有属性 -webkit-line-clamp

    注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示
    -webkit-line-clamp: 2; // 限制两行
    -webkit-box-orient: vertical; // 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    

    那么,跨浏览器兼容方案来了

    CSS 处理模式

    p {
        position:relative;
        line-height:1.4em;
        /* 3 times the line-height to show 3 lines */
        height:4.2em;
        overflow:hidden;
    }
    // 通过伪类定位content为... 背景图片带过渡色彩的盒子
    p::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
    }
    

    Clamp.js 处理模式

    var module = document.getElementById("clampjs");
    $clamp(module, {clamp: 3});
    

    文字左右间距控制问题

    文字左右间距考虑两种情况。

    • 文字与单词间距,使用 letter-spacing: 20px;
    • 单词与单词间距,使用 word-spacing: 20px;
    letter-spacing: 20px; // J a m s e W o n g  i s  进 行 哦
    
    word-spacing: 20px; // JamseWong is 进行哦
    

    相关文章

      网友评论

          本文标题:文本处理常见问题

          本文链接:https://www.haomeiwen.com/subject/ambmhqtx.html