CSS3文字溢出

最新推荐文章于 2023-11-07 00:28:21 发布

原创最新推荐文章于 2023-11-07 00:28:21 发布 · 488 阅读

1 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

31 篇文章

订阅专栏

文字属性：文本溢出

1、text-overflow: clip|ellipsis|ellipsis-word 属性值详解如下：

clip //不显示省略标记(…),而是简单裁切

ellipsis //当对象文本一出时显示省略标记(…)，省略标记插入的位置是最后一个字符

white-space:nowrap 文本不会换行，直到遇到 <br> 标签为止。(css2.1)

2、单行打点：

text-overflow:ellipsis;

white-space:nowrap; //强制文本在一行内显示

overflow:hidden; //溢出内容为隐藏

3、多行打点：

-webkit-line-clamp: 2;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;//子元素被垂直排列

overflow:hidden;

4、多行打点兼容性不好，可用js操作

文字属性：文本换行

word-wrap: normal|break-word; 属性值详解如下：

normal //连续文本换行

break-word //内容将在边界内换行（强制换行）

5、文字属性：文字字体

@font-face{

font-family: 'ShadowsIntoLight’;

src: url('./ShadowsIntoLight.ttf');/*兼容IE*/

src:

url('./ShadowsIntoLight.eot?#iefix') format('embedded-opentype’),

url('./ShadowsIntoLight.woff') format('woff’),

url('./ShadowsIntoLight.ttf') format('truetype’),

url('./ShadowsIntoLight.svg') format('svg');

}

地址：http://www.zhaozi.cn/s/all/ttf/index_2.php（这里的字体库更好看）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a {
            display: inline-block;
            width: 100px;
            border: 1px solid red;
            /* 强制换行 */
            /*word-wrap: break-word;*/
            /*实现单行打点*/
            /*text-overflow: clip 处理文字溢出的方式——截断*/
            /*text-overflow: ellipsis;
            /*超出部分隐藏*/
            /*overflow: hidden;*/
            /*强制不换行*/
            /*white-space: nowrap;*/
            /*注：要实现单行打点，首先要将文本设置为强制不换行，因为对于（中文和英文单词）来说超出部分会自动换行；换行后无法实现截断效果*/
            /* -webkit-line-clamp: 2; */
            /*几行打点——————此种多行打点方式（兼容性不是很好）*/
            /* text-overflow: ellipsis; */
            /*处理文字溢出的方式——打点*/
            /* display: -webkit-box; */
            /* 子元素被垂直排列 */
            /* -webkit-box-orient: vertical; */
            /*设置子元素的排列方式*/
            /* overflow: hidden; */
        }
    </style>
</head>

<body>
    <!--默认情况下，对于西方文字，浏览器会在半角空格或连字符换行；而不会在单词的中间突然换行-->
    <a href="http://www.baidu.com">百度一下，你就知道！</a>
    <a href="http://www.baidu.com" class="dat">百度一下，你就知道！百度一下，你就知道！百度一下，你就知道！</a>

    <script>
        var A = document.getElementsByClassName('dat')[0];

        function dot(dom, num) {
            var str = dom.innerHTML;
            var len = str.length;
            if (len > num) {
                dom.innerHTML = str.substr(0, num) + '...';
            }
        }
        dot(A, 8);
    </script>
</body>

</html>

效果图：