【问题标题】:Break long text into <div> elements on client-side在客户端将长文本分解为 <div> 元素
【发布时间】:2011-11-16 02:29:46
【问题描述】:

假设我有一个很长的文本,例如一篇很长的文章。
是否可以在 client-side 上将文本分成等长的 div 元素:

css(这太棒了!)? javascript?

目标:我希望将这些 div 与 float 并排放置。

- 我知道这在服务器端是可能的,因为我已经写了一些在 PHP 中完全符合我要求的东西。 [有兴趣的就说一句话]

【问题讨论】:

  • 您是否在寻求有关如何制作列的帮助?
  • 是的,这是可能的(当然不是纯 CSS)。你想在哪里打断文本?
  • 如果我有 5000 个单词,我很想将它分成 3 个部分。我的代码所做的是:搜索下一个空格,关闭 div 并打开一个新的。

标签: javascript html css


【解决方案1】:

你可以做这样的事情......

var a = $('#text').text().split(' ');
var b = c = d = e = '';

var b = a.length/3;

if((a.length % 3) > 0){
    a.push(' ');
    b = a.length/3;

    if(b*3 % 3 > 0){
        a.push(' ');
        b = a.length/3;

        if(b*3 % 3 > 0){
            a.push(' ');
            b = a.length/3;

            if(b*3 % 3 > 0){
                a.push(' ');
                b = a.length/3;            
            }
        }
    }    
}


for(var i = 0; i < b; i++){
   c += a[i] + ' ';
}

for(var j = b; j < b*2; j++){
   d += a[j] + ' ';
}

for(var k = b*2; k < b*3; k++){
   e += a[k] + ' ';
}

$('#text').replaceWith('<div class="replace">' + 
                       c + '</div><div class="replace">' + 
                       d + '</div><div class="replace">' + 
                       e + '</div>');

还有CSS

.replace{
    float:left;
    margin:1%;
    width:30%;        
}

示例: http://jsfiddle.net/jasongennaro/NsdST/2/

【讨论】:

  • 你的代码看起来很不错。我会看看。但是有没有办法让它更加模块化? - 对不起,我必须承认我的 JS 知识相当有限。如何扩展使文本成为 2,4,5... 列?
  • @jakob 我调整了上面的代码以确保它可以工作,即使单词的数量不容易被 3 整除。让它更模块化?可以做到,但不像我现在写的那样。
猜你喜欢
  • 1970-01-01
  • 2011-04-22
  • 1970-01-01
  • 2011-03-06
  • 2016-10-21
  • 2018-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多