javascript - 如何计算每行文本中的符号数？-6ren

javascript - 如何计算每行文本中的符号数？

转载作者：行者123 更新时间：2023-11-28 00:02:29

25

4

我在预标记中有一些具有固定宽度的文本，我需要计算该文本 block 的每一行中有多少个字符。例如，在下面的示例中，第一行有 80 个字符，第二行有 79 个字符，第三行有 81 个字符，依此类推。当我们有一个带有换行符的空字符串时，它应该只是 1。

pre {
    display: block;
    white-space: pre-wrap;
    background: white;
    border-color: white;
    word-break: normal;
    width: 600px;
}

<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</pre>

这可能吗？

最佳答案

遵循 How can I count text lines inside an DOM element? Can I? 中找到的方法我终于成功实现了下面的代码。棘手的部分是必须用 css 给出 line-height，这样我们才能计算行数。

[更新]

代码已更新，以便它可以在 Firefox 上运行

<html>
    <head>
        <style>
            pre {
                display: block;
                white-space: pre-wrap;
                background: white;
                border-color: white;
                word-break: normal;
                width: 600px;
                line-height: 1.14em; /* must be defined to work */
            }
        </style>
    </head>
    <body>
        <pre id="preContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</pre>
        <script>
            function calcLineChars(elem){
                var cpy = elem.innerHTML;
                var totalLines = countLines(elem);
                elem.innerHTML = '';
                var result = [];
                var charCounter = 0;
                var lastCount = 0;
                for(var i = 0; i < totalLines; i++){
                    console.log(i);
                    elem.innerHTML += cpy[charCounter];
                    while((i + 1) == countLines(elem) && charCounter < cpy.length - 1){
                        charCounter ++;
                        elem.innerHTML += cpy[charCounter];
                    }
                    charCounter ++;
                    var currentLength;
                    if((i + 1) != countLines(elem)){
                        currentLength = elem.innerHTML.substring(0, elem.innerHTML.lastIndexOf(' ')).length + 1;
                    }else{
                        currentLength = elem.innerHTML.length;
                    }
                    result.push(currentLength - lastCount);
                    lastCount = currentLength;
                }
                return result;
            }

            function countLines(elem) {
                var elemHeight = elem.offsetHeight;
                var lineHeight = elem.style.lineHeight || document.defaultView.getComputedStyle(elem, null).getPropertyValue("line-height");
                if(lineHeight.indexOf('px') != -1){
                    lineHeight = lineHeight.substring(0, lineHeight.length - 2);
                }
                lineHeight = parseFloat(lineHeight);
                var lines = elemHeight / lineHeight;
                var intLines = parseInt(lines);
                if(lines - intLines >= 0.1){
                    intLines ++;
                }
                return intLines;
            }

            var lineChars = calcLineChars(document.getElementById('preContent'));
            var message = '';
            for(var i = 0, current; current = lineChars[i]; i++){
                message += '\n' + 'line ' + (i + 1) + ' has ' + current + ' chars';
            }
            alert(message);
        </script>
    </body>
</html>

关于javascript - 如何计算每行文本中的符号数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31658992/

25

4

0

文章推荐： c++ - 复制颜色和深度模板缓冲区供以后使用

文章推荐： javascript - 通过 JavaScript 覆盖一个类

文章推荐： c++ - 如何获取另一个进程的基址？ (ASLR)

java - JFrame 中的 JPanel 中的 JScrollPane 中的 JTextPane
我想做的是让 JTextPane 在 JPanel 中占用尽可能多的空间。对于我使用的 UpdateInfoPanel: public class UpdateInfoPanel extends JP
java - JFrame 中的 JPanel 中的 JTextArea 中的 JScrollPane 出现问题
我在 JPanel 中有一个 JTextArea，我想将其与 JScrollPane 一起使用。我正在使用 GridBagLayout。当我运行它时，框架似乎为 JScrollPane 腾出了空间，但
ios - iOs Xcode 中的 UIViewController 中的 UIView 中的 UITableView
我想在 xcode 中实现以下功能。我有一个 View Controller 。在这个 UIViewController 中，我有一个 UITabBar。它们下面是一个 UIView。将 UITab
sql - 与 SQL 中的 STUFF 等效的函数(MySQL 中的 GROUP_CONCAT/Oracle 中的 LISTAGG)
有谁知道Firebird 2.5有没有类似于SQL中“STUFF”函数的功能？我有一个包含父用户记录的表，另一个表包含与父相关的子用户记录。我希望能够提取用户拥有的“ROLES”的逗号分隔字符串，而
Mirth 中的 Json 解析或 Mirth 中的 Json 或 Mirth 中的 HL7 到 JSON
我想使用 JSON 作为 mirth channel 的输入和输出，例如详细信息保存在数据库中或创建 HL7 消息。简而言之，输入为 JSON 解析它并输出为任何格式。最佳答案 var objec
python - 如果文件 1 中的 A 列 = 文件 2 中的 A 列，则替换为文件 2 中的 B 列
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
Javascript 中的 HAML 中的 Javascript
我有一个以前可能被问过的问题，但我很难找到正确的描述。我希望有人能帮助我。在下面的代码中，我设置了varprice，我想添加javascript变量accu_id以通过rails在我的数据库中查找记
HTML 中的 SVG 中的 HTML
我有一个简单的 SVG 文件，在 Firefox 中可以正常查看 - 它的一些包装文本使用 foreignObject 包含一些 HTML - 文本包装在 div 中:
ruby - Ruby 中的 If block 中的 "Or"
所以我正在为学校编写一个 Ruby 程序，如果某个值是 1 或 3，则将 bool 值更改为 true，如果是 0 或 2，则更改为 false。由于我有 Java 背景，所以我认为这段代码应该有效:
amazon-web-services - 如何从账户 A 中的 Lambda(VPC 中的 Lambda)调用账户 B(VPC 中的此 Lambda)中的 AWS Lambda 函数
我做了什么: 我在这些账户之间创建了 VPC 对等连接互联网网关也连接到每个 VPC 还配置了路由表(以允许来自双方的流量) 情况1: 当这两个 VPC 在同一个账户中时，我成功测试了从另一个 La
php - 如何获取 column1 中的 value1 和 column2 中的 value2 但 column1 中的 value2 在 column2 中没有 value1 的行？
我有一个名为 contacts 的表: user_id contact_id 10294 10295 10294 10293 10293 10294 102
php - Magento 中的 foreach 中的 getChildHtml
我正在使用 Magento 中的新模板。为避免重复代码，我想为每个产品预览使用相同的子模板。特别是我做了这样一个展示: $products = Mage::getModel('catalog/pro
protocols - Elixir 中的 "for"中的 "defimpl"实际上检查了什么？
“for”是否总是检查协议(protocol)中定义的每个函数中第一个参数的类型？编辑(改写): 当协议(protocol)方法只有一个参数时，根据该单个参数的类型(直接或任意)找到实现。当协议(p
javascript - PHP 中的 JavaScript 中的 PHP
我想从我的 PHP 代码中调用 JavaScript 函数。我通过使用以下方法实现了这一点: echo ' drawChart($id); '; 这工作正常，但我想从我的 PHP 代码中获取数据，我使
javascript - html 中的 html 中的 JavaScript
这个问题已经有答案了: Event binding on dynamically created elements? (23 个回答) 已关闭 5 年前。我有一个动态表单，我想在其中附加一些其他 h
javascript - componentDidMount() 中的 .map 中的 setState
我正在尝试找到一种解决方案，以在 componentDidMount 中的映射项上使用 setState。我正在使用 GraphQL连同 Gatsby返回许多 data 项目，但要求在特定的 pat
android - ScrollView 中的 View 中的 OnTouchListener
我在 ScrollView 中有一个 View 。只要用户按住该 View ，我想每 80 毫秒调用一次方法。这是我已经实现的: final Runnable vibrate = new Runnab
android - GetStringUTFChars 中的 dvmDecodeIndirectRef 中的 dvmAbort
我用 jni 开发了一个 android 应用程序。我在 GetStringUTFChars 的 dvmDecodeIndirectRef 中得到了一个 dvmabort。我只中止了一次。为什么会这
android - Activity 中的 FragmentPagerAdapter 中的 RecyclerView
当我到达我的 Activity 时，我调用 FragmentPagerAdapter 来处理我的不同选项卡。在我的一个选项卡中，我想显示一个 RecyclerView，但他从未出现过，有了断点，我看到
android - Activity 中的 DialogFragment 中的 RecyclerView
当我按下 Activity 中的按钮时，会弹出一个 DialogFragment。在对话框 fragment 中，有一个看起来像普通 ListView 的 RecyclerView。我想要的行为是当

首页

博学

6Ren·AI

商城

javascript - 如何计算每行文本中的符号数？