问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

计算文本显示了多少行？

头像
Jin90
    1914

    问题背景： 显示一段文本，如果文本超过十行显示展开，收起按钮，按钮占一整行。文本有换行符。
    问题：怎么计算文本实际占多少行。

    尝试：使用z-index= -1先显示文本，计算文本高度。大于一个固定高度高度来判断。是否超过十行。
    疑问：

     1.中文和英文的文本高度不一样，固定高度不准确。
 2.z-index = -1 来计算觉得要显示两遍文本信息
    javascripthtml前端
    阅读 2.6k
    avatarAI BotBETA

    要准确计算文本占用的行数，可以使用以下方法：

    1. 使用HTML和CSS：
    * 将文本放入一个固定宽度的容器中。
* 使用CSS的`line-height`属性来设置行高。
* 通过JavaScript计算容器的高度，并除以`line-height`来得到行数。
    1. 处理中英文高度不一致：
    * 可以为英文和中文设置不同的`line-height`。
* 或者，使用字体度量API（如`measureText`）来测量每个字符的宽度，然后根据容器的宽度来计算大致的行数。但这种方法可能不太准确，尤其是当文本中有宽度可变的字符（如中文）时。
    1. 避免显示两遍文本信息：
    * 你可以使用一个隐藏的容器来测量文本高度，而不是使用`z-index`。这个隐藏的容器在视觉上不可见，但可以用于计算。

    以下是一个简单的示例，展示如何使用HTML和JavaScript来计算文本的行数：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculate Text Lines</title>
    <style>
        .text-container {
            width: 300px; /* 设置容器宽度 */
            line-height: 1.5em; /* 设置行高 */
            visibility: hidden; /* 隐藏容器，但不影响其布局 */
            position: absolute;
            top: -9999px; /* 将容器移出视口 */
        }
    </style>
</head>
<body>

<div class="text-container" id="textContainer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<script>
    function calculateLines() {
        const container = document.getElementById('textContainer');
        const lineHeight = parseFloat(getComputedStyle(container).lineHeight);
        const containerHeight = container.offsetHeight;
        const lines = Math.ceil(containerHeight / lineHeight);
        console.log(`The text takes up ${lines} lines.`);
    }

    window.onload = calculateLines;
</script>

</body>
</html>

    在这个示例中，.text-container是一个隐藏的容器，用于测量文本的高度。calculateLines函数计算并输出文本的行数。这种方法考虑了line-height，因此可以更准确地计算行数，而不管文本是中文还是英文。

    2 个回答
    得票最新
    头像
    ezmo
      7.3k2633
      ✓ 已被采纳

      你的思路没有错，

      1. 主动设定好文本区域的line-height，就避开了高度计算不准确的问题。
      2. 使用一个独立隐藏区域输出文本（visibility为hidden，绝对定位，将位置设定到可视区域外，比如 top -9999px)，计算高度，除以 line-height得到行数。
      3. 然后在正式展示区域按照计算的行数进行条件展示。
      头像
      Fractal
        5.5k22331

        纯 CSS 检测文本是否溢出

        里面还有一堆的链接

        dom 获取不到？试试 CSS 动画监听元素渲染吧
尝试借助CSS @container实现多行文本展开收起
突发奇想！借助CSS自定义彩色字体来实现多行文本展开收起
CSS 实现多行文本“展开收起”
CSS 文本超出提示效果
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏