问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么设置以下文字，没有超出一行，按照一行的大小显示，超出一行，文字的font-size和line-height变为原来的一半，且当它超出两行时，超出部分隐藏，末尾展示省略号？

头像
栀
    5315
    头像
    陟上晴明
      21.4k144991

      1.这是没有超出一行的图片：
      image.png
      以下是没有超出一行的样式：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

.content{
        width: 300px;
        height:60px;
        background-color: red;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        font-size:30px;
        line-height:60px;

}




</style>
</head>
<body>
<div class="content">
测试文字测试文字测试
</div>

<script>
       
  
</script>
    
</body>
</html>

      2.这是超出两行时的图片

      image.png
      以下是相关样式：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

.content{
        width: 300px;
        height:60px;
        background-color: red;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        font-size:15px;
        line-height:30px;

}




</style>
</head>
<body>
<div class="content">
测试文字测试文字测试我是溢出部分我是溢出部分我是溢出部分我是溢出部分我是溢出部分我是溢出部分
</div>

<script>
       
  
</script>
    
</body>
</html>

      以上两个 content 的样式就 font-size 和 line-height 发生了变化，第二个这两个声明都变为原先的一半

      前端javascriptcsscss3
      阅读 2.3k
      4 个回答
      得票最新
      头像
      陟上晴明
        21.4k144991

        CSS没有办法实现，只能提供过JS来判断 content 的字数是否超出一个值，然后给 .content 增加一个多行的 className 即可。

        头像
        林小志
        4.4k2218
        头像
        乔治
          12.9k1329
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 300px;
            background-color: red;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div id="content" class="content">
        测试文字测试文字测试我是溢出部分我是溢出部分我是溢出部分我是溢出部分我是溢出部分我是溢出部分
    </div>
    <script>
        const content = document.getElementById('content');

        // 设置默认的 font-size 和 line-height
        const defaultFontSize = 30;
        const defaultLineHeight = 60;

        // 设置两行文本的显示效果
        function setTwoLines() {
            content.style.webkitLineClamp = '2';
            content.style.lineClamp = '2';
        }

        // 判断文本是否超出一行
        function isOverOneLine() {
            content.style.fontSize = `${defaultFontSize}px`;
            content.style.lineHeight = `${defaultLineHeight}px`;

            const lineHeight = parseFloat(getComputedStyle(content).lineHeight);
            const height = content.offsetHeight;

            return height > lineHeight;
        }

        if (isOverOneLine()) {
            content.style.fontSize = `${defaultFontSize / 2}px`;
            content.style.lineHeight = `${defaultLineHeight / 2}px`;
            setTwoLines();
        }
    </script>
</body>
</html>
          头像
          未央
            255110

            css 结合 js 实现。

            初始 CSS 中，不设置 height 和 line-clam/-webkit-line-clamp 属性；
            设置 font-size 和 line-height 属性，其他没有影响（和你的例子比较）。

            在 JS 中判断：当 .content 元素的高度超过初始 CSS 设置的 line-height 时，说明文本超出一行、已经自动换行；需要修改 font-size、line-height 等属性。

            通过 js 动态修改 .content 元素的 font-size、line-height 属性，并添加 line-clam 属性。

            参考代码：

            <style>
    .content {
        width: 300px;
        background-color: red;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-break: break-all;
        font-size: 30px;
        line-height: 60px
    }
</style>
<div class="content">
    测试文字测试文字测试 我是溢出部分我是溢出部分我是溢出部分我是溢出部分我是溢出部分我是溢出部分
</div>
<script>
    (function () {
        "use strict";
        const element = document.querySelector('.content');
        // 获取 font-size 和 line-height 属性，默认是初始 css 中设置的数值
        // 也可以 自行设置一个固定的数值。
        // 只显示一行文本时候的 font-size 和 line-height
        const fontSize = getComputedStyle(element).fontSize; // 30px
        const lineHeight = getComputedStyle(element).lineHeight;// 60px

        /**
         * @param ele
         */
        function setLinesStyle(ele) {
            const height = ele.offsetHeight;
            if (height > parseFloat(lineHeight)) {
                ele.style.fontSize = `${parseFloat(fontSize) / 2}px`;
                ele.style.lineHeight = `${parseFloat(lineHeight) / 2}px`;
                ele.style.webkitLineClamp = '2';
                ele.style.lineClamp = '2';
            }
        }

        setLinesStyle(element);
    })(window, document)
</script>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题