Question

在具有固定宽度（例如300px）的父div的html页面上。作为它的孩子，我有多个div容器，每个容器都包含一个锚。所以，结构是这样的：

<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;
}

我想重复锚内的字符来填充父宽度。所以，在这种情况下，重复＆＃34;短语＆＃34;直到达到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的例外值。相反，我认为它是窗口宽度，因为它类似于1904px。

此外，我的第一种方法假设有一个单调字体。也许不是浏览器默认字体的最佳方式。

Answer 1

以下代码应该执行您想要的操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src='jquery-2.2.0.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>

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

Answer 2

*spacer的班级定义无效。 *是CSS中的保留字符，不能在类名中使用。我从解决方案中删除了它。

间隔元件具有性质display: block，这使得其含量难以确定。块元素固有地占据父元素的整个宽度，使得难以评估图像和填充文本的联合大小。我将其更改为display: inline-block。现在我们可以很容易地计算出要填充的空间量。

为了跟踪填充文字的一个单位的大小，我在单词<span>周围创建了Wau。这让我可以准确地测量这个家伙的体型。现在我知道重复多少次以填补空间。 JS有新的计算来运行这个东西。

参见随附的js小提琴和代码。

https://jsfiddle.net/rc4qyuzc/1/

HTML（从类名中删除*）

<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">
        <span class="spacer-text">Wau</span>
        <div class="tsstatusFlags">
        </div>
    </a>
    </div>
</div>

CSS（将填充符div更改为内联块）

.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;
}

.tsstatusItem.spacer {
  display: inline-block;
}

JS（新计算）

$(document).ready(function doReady() {
    var $elem;
    var iFontSize = 0;
    var iFullWidth = 0;
    var iIterations = 0;
    var sText = "";

    $(".tsstatusItem.spacer").each(
        function(index, value) {
            var $spacer_elem = $(value).find(".spacer-text").first();
            var width_available = $(".tsstatus").innerWidth() - $(value).innerWidth();
            var unit_filler_width = $spacer_elem.innerWidth();
            var times_to_fill = Math.floor(width_available/unit_filler_width);
            var unit_filler_text = $spacer_elem.text();
            var new_filler_text = unit_filler_text;
            for (var i = 0; i < times_to_fill; i++) {
                new_filler_text += unit_filler_text;
            }
            $spacer_elem.text(new_filler_text)
        }
    );
});

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

2 个答案:

HTML（从类名中删除*）

CSS（将填充符div更改为内联块）

JS（新计算）