是否可以在多个div上显示一个字符串？

-1

我有一个字符串，它是x（让我们说10,000为参数）char long。然后我可以在<div>中显示该字符串。到目前为止，我可以在一个div中显示整个字符串，这很好。是否可以在多个div上显示一个字符串？

所以，假设我有以下几点：

字符串 - “此字符串是10000个字符长”

的div - [DIV1] [DIV2] [DIV3]

我想分割字符串并根据<div>的宽度/高度将其显示在多个<div>元素上。

结果 - [此字符串] [10000] [长字符]

到目前为止，我可以打破使用maxCharPerDiv变量

我JS串入子和显示部分字符串

var contents; //this is my endless string 
    var content; 
    var maxCharPerDiv = 1000; 
    var currentDiv = ""; 
    var divsArray = []; 

    function contentBreak(str, len) { 
    if (str.length < len) { 
     return divsArray.push(str); 
    } else { 
     divsArray.push(str.substring(0, len)); 
    } 
    contentBreak(str.substring(len), len); 
    } 

    for (var i = 0; i < contents.length; i++) { 
    content = contents[i].content; 
    contentBreak(content, maxCharPerDiv); 
    } 

    for (var k = 0; k < divsArray.length; k++) { 
    console.log(divsArray[k] + "\n"); 
    }

CSS

div { 
    width: 380px; 
    height: 582px; 
    background: white; 
    color: #ccc; 
}

上述工作并返回终端中的子字符串，但我只有1出现在我的div上，因为其余溢出超出设定的高度/宽度。

问题：

是否有可能实现这样的显示
是否有可能基于一个div的宽度/高度这样做呢？

非常感谢在正确的方向微调。

谢谢。

来源

2017-02-27 Ange

_绝对没有，除非你有等宽字体（即使在这种情况下，换行也会破坏逻辑）。 – hindmost

我不知道你为什么要这样做，但如果只是为了显示目的，你可能想看看CSS多列布局：https：//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts – helb

@ behindmost oh ...我明白了。在这里，我希望这是大声笑！感谢您告诉我，我必须找到一种方法将字符串分解为单独的元素，并将它们备份到各自的div中，也许？或者尝试@helb建议的CSS多列布局。它仅用于显示目的。我有2个独立的div（可能使用更多），只有一个字符串。感谢您的建议，我会为此提供一个理由。 – Ange

创建一个div类，然后添加CSS代码来改变div的z-index的

例如

你的CSS：_Is可以这样做基于对一个div的宽度/高度

#always-on-top {z-index: 9999999;}

应该做的伎俩;-)

来源

2017-02-27 15:56:46 FusionDesign

感谢您的回复。虽然这样做只设置我的div的堆栈顺序，如[w3schools]（https://www.w3schools.com/cssref/playit.asp?filename=playcss_z-index&preval=2）中所述。这不允许我的字符串显示在多个div :( – Ange

是否可以在多个div上显示一个字符串？

回答

相关问题