javascript - 如何重复 n 次短语或单个字符以填充容器宽度？-6ren

javascript - 如何重复 n 次短语或单个字符以填充容器宽度？

转载作者：行者123 更新时间：2023-11-28 01:17:11

26

4

在具有固定宽度(例如 300 像素)的父 div 的 html 页面上。作为它的 child ，我得到了多个 div 容器，每个容器都包含一个 anchor 。所以，结构是这样的:

<div class="tsstatus">
    <div class="tsstatusItem tsstatusServer">
        <!-- [...] -->
        <div class="tsstatusItem">
            <a href="#">
                <img src="image.png">Upload/Download
                <div class="tsstatusFlags">
                    <img src="image.png">
                </div>
            </a>
            <!-- -->
        </div>
    </div>
    <!-- [...] -->
    <div class="tsstatusItem *spacer">
    <a href="#" title="Wau [43]">
        <img src="image.png" alt="image.png">Wau
        <div class="tsstatusFlags">
        </div>
    </a>
    </div>
</div>

它的CSS:

.tsstatus, .tsstatuserror {
    background-color: #ffffff;
    width: 300px;
}

.tsstatus, .tsstatus *, .tsstatuserror {
    color: #000000;
    font-family: Verdana, sans-serif;
    font-size: 10px;
}

.tsstatus label {
    border-bottom: 1px solid #aaaaaa;
}

.tsstatusItem a {
    color: #000000;
}

.tsstatusItem a:hover {
    background-color: #f6f6f6;
    color: #000099;
}

.tsstatuserror {
    color: #ff0000;
}

.tsstatus, .tsstatus * {
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

.tsstatus {
    position: relative;
    overflow: hidden;
}

.tsstatus label {
    display: block;
    padding: 2px 0;
}

.tsstatusItem {
    margin-left: 16px;
    position: relative;
    white-space:nowrap;
    text-align: left;
}

.tsstatusItem a {
    display: block;
    text-decoration: none;
}

.tsstatusItem img {
    border: 0;
    vertical-align: middle;
    margin-right: 2px;
}

.tsstatusFlags {
    position: absolute;
    right: 0;
    top: 0;
}

.tsstatusServer {
    margin-left: 0;
}

.tsstatusItem.cspacer {
    text-align: center;
}

.tsstatusItem.rspacer {
    text-align: right;
}

.tsstatusItem.lspacer {
    text-align: left;
}

我想重复 anchor 内的字符以填充父级宽度。因此，在这种情况下，重复“短语”直到达到 300px。

我试着用 JavaScript/jQuery 来做:

$(document).ready(function() {
    var $elem;
    var iFontSize = 0;
    var iFullWidth = 0;
    var iIterations = 0;
    var sText = "";
    $(".item.repeat").each(
        function(index, value) {
            $elem = $(value).find("a").first();
            $elem.text($elem.text().trim());
            iFontSize = $elem.css("font-size");
            iFontSize = parseInt(iFontSize.substr(0, iFontSize.indexOf("px")));
            iFullWidth = $(value).innerWidth();
            // 1st Method
            //iIterations = parseInt(iFullWidth / (iFontSize * $elem.text().length));
            // 2nd Method
            iIterations = parseInt(iFullWidth / $elem.innerWidth());
            for (var i = 0; i < iIterations; i++) {
                sText += $elem.text();
            }
            $elem.text(sText);
        }
    );
});

第一种或第二种方法都不适合我。此外，由于某些奇怪的原因，$(value).width() 不是 300px 的异常(exception)值。相反，我认为它是窗口宽度，因为它大约是 1904 像素。

另外，我的第一个方法假设有一个单 Angular 字体。可能不是浏览器默认字体的最佳方式。

最佳答案

下面的代码应该做你想做的:

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

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    $().ready(function() {
      // Process items to be repeated
      $('.item.repeat a').each(function() {
        var $this = $(this);

        var text = $this.text();

        // Remove these comments if spaces are needed
        /*text += ' ';
        $this.html($this.text()+'&nbsp;');*/

        var width = $this.outerWidth();
        var parentWidth = $this.parent('div').outerWidth();

        var numReps = Math.floor(parentWidth / width);

        $this.html(text.repeat(numReps));
      });
    });
  </script>
</head>

<body>
  <div class="wrapper" style="width:300px;">
    <div class="item repeat">
      <a href="#">phrase</a>
    </div>
    <div class="item">
      <a href="#">phrase</a>
    </div>
    <div class="item repeat">
      <a href="#">phrase</a>
    </div>
  </div>
</body>

</html>

如果短语之间需要空格，可以注释掉附加它们的部分。

关于javascript - 如何重复 n 次短语或单个字符以填充容器宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35281926/

26

4

0

文章推荐： php - 命中 'back' 时重置复选框值

文章推荐： IE 中 HTML li 值以 0 开头

c - 反 C(字符 + 字符)
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预
c# - 字符 + 字符 = 整数？为什么？
为什么在 C# 中添加两个 char 结果是 int 类型？例如，当我这样做时: var pr = 'R' + 'G' + 'B' + 'Y' + 'P'; pr 变量变为 int 类型。我希望它是
c++ - 字符!=(有符号字符)，字符!=(无符号字符)
下面的代码可以编译，但 char 类型的行为与 int 类型的行为不同。特别是 cout ::ikIsX >() ::ikIsX >() ::ikIsX >() using names
正则表达式匹配 1+ 字符，但不是 500 字符
我正在寻找一个正则表达式，它可以匹配长度为 1 个或多个字符但不匹配 500 的内容。这将在 Rails 路由文件中使用，特别是用于处理异常。路线.rb match '/500', to: 'err
C - 字符 *' differs in levels of indirection from ' 字符 (*)[200]
对于 C 编程作业，我正在尝试编写几个头文件来检查所谓的“X 编程语言”的语法。我最近才开始，正在编写第一个头文件。这是我编写的代码: #ifndef _DeclarationsChecker_h_
php - 为什么这个扩展的 ascii 字符(â、é 等)被替换为字符？
为什么扩展的 ascii 字符(â、é 等)被替换为字符？我附上了一张图片...但我正在使用 PHP 从 MySQL 中提取数据，其中一些位置有扩展字符...我使用的是 Arial 字体。您可以
r - 如何在 R 中的(字符/数字)和(字符/数字)类型之间进行换行
我有一个与 R 中的断线相关的简单问题。我正在尝试粘贴，但在获取(字符/数字)之间的断线时遇到问题。请注意，这些值包含在向量中(V1=81,V2=55,V3=25)我已经尝试过这段代码: cat(p
c++ - 如何将 ANSI 字符 (char) 转换为 Unicode 字符 (wchar_t)，反之亦然？
如何将 ANSI 字符 (char) 转换为 Unicode 字符 (wchar_t)，反之亦然？是否有用于此目的的任何跨平台源代码？最佳答案是的，在中你有mbstowcs()和 wcsto
javascript - 如何通过 JavaScript 将 ANSI 字符 ID 转换为 Unicode 字符 ID？
函数 fromCharCode 不适用于国际 ANSI 字符。例如，对于 ID 为 192 到 223 的俄语 ANSI (cp-1251) 字符，它返回特殊字符。如何解决这个问题？我认为，需要将A
mysql - 我想隐藏 id，如果不喜欢，但不起作用 SELECT * FROM 字符，character_actor WHERE 字符.id 不喜欢character_actor.character_id;
如果不喜欢，我想隐藏 id，但不起作用 SELECT * FROM character, character_actor WHERE character.id NOT LIKE character_a
c - "expected ' 字符 * ' but argument is of type ' 字符 ' "- 回文 + 反向
现在这个程序成功地反转了键盘输入的单词。但是我想在我反转它之前“保存”指针中的单词，所以我可以比较两者，反转的和“原始的”，并检查它们是否是回文。我还没有太多经验，可能会出现比我知道的更多的错误，但我
c - Memcpy func 获取指针变量？字符*p；字符* q； memcpy(p,q,10);会起作用吗？
Memcpy 和 memcmp 函数可以接受指针变量吗？ char *p; char* q; memcpy(p,q,10); //will this work? memcmp(p,q,10); //w
java - 在 Java 字符(16 位)中存储 UTF-8 字符(8 位)时如何避免内存浪费。二合一？
恐怕我对一个相当过饱和的主题的细节有疑问，我搜索了很多，但找不到一个明确的答案来解决这个特定的明显-imho-重要的问题: 使用UTF-8将byte[]转换为String时，每个字节(8bit)都变成
python不打印出“字符
我有一个奇怪的问题。我需要从 stat 命令打印输出字符串。我已经编写了获取一些信息的代码。 import glob import os for file in glob.glob('system1
Java使用正则表达式转义连字符 "-"字符
我正在使用 Java 并具有其值如下所示的字符串， String data = "vale-cx"; data = data.replaceAll("\\-", "\\-\\"); 我正在替换其中的“
Java如何转义url参数中的 "&"字符？
String urlParameters = "login=test&password=te&ff"; 我有一个String urlParams，& - 是密码的一部分，如何使其转义，从而不被识别为分
Java仅从字符串中提取第一个字母/字符
大家好，我只想从此字符串中提取第一个字母: String str = "使徒行傳 16:31 ERV-ZH"; 我只想获取这些字符: 使徒行傳并且不包括 ERV-ZH 仅数
字符 * 错误访问错误
这个问题已经有答案了: Crash or "segmentation fault" when data is copied/scanned/read to an uninitialized point
字符**到字符*
所以，我有一个字符**；它本质上是一个句子，带有指向该句子中每个单词的指针；即 'h''i''\0''w''o''r''l''d''\0''y''a''y''!''\0' 在这种情况下，我希望使用可
Python打印“字符
这个问题在这里已经有了答案: Using quotation marks inside quotation marks (12 个答案) 关闭 7 年前。如何打印 " 字符？我知道打印 % 符号

首页

博学

6Ren·AI

商城

javascript - 如何重复 n 次短语或单个字符以填充容器宽度？