gpt4 book ai didi

php - 在不同的 div 中继续溢出文本?

转载 作者:塔克拉玛干 更新时间:2023-11-03 06:03:48 24 4
gpt4 key购买 nike

我想做的是创建一个网站,以虚假字母的形式显示我的咆哮。

我希望固定“纸张大小”(div 大小),并在第二张纸(第二个 div)上继续显示正下方的文本,如下所示。

I apologize, being a new user, I am not allowed to post the screenshots I have created to help explain my situation, so am forced to link until I have enough reputation points:

http://img16.imageshack.us/img16/5538/pagesuc.jpg

仅为简单起见:我创建了一个简单的 html/css 页面,以最简单的形式演示我试图用代码完成的任务:

<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.container {
background: #FFFFFF;
width: 600px;
height: 400px;
margin: 0 auto;
}
#lbox {
background: #F00;
width: 300px;
height: 400px;
float: left;
}
#rbox {
background: #00F;
width: 300px;
height: 400px;
float: right;
}
.flowcontent {
padding: 10px 50px;
}
</style>

<div class="container">
<div id="lbox">
<div class="flowcontent">
<p>Lorem Ipsum...</p>
</div>
</div>
<div id="rbox">
<div class="flowcontent"> </div>
</div>
</div>

截图:

I apologize, being a new user, I am not allowed to post the screenshots I have created to help explain my situation, so am forced to link until I have enough reputation points:

http://img689.imageshack.us/img689/7853/overflowc.jpg

在这种情况下,我希望红色 div 的溢出在右侧的蓝色 div 中继续。

我意识到单独使用 HTML/CSS 可能无法做到这一点,但我希望 CSS3 可能对此有一些新的技巧,因为它有更高级的列处理。如果不行,有没有人有建议使用 PHP 甚至 JavaScript 或 JQuery 来解决这个问题的合乎逻辑的方法?

我知道 PHP,但仍然是 JS/JQ 新手,所以我提供了一些(希望如此)非常简单的示例代码,供任何人插入他们自己的 JS/PHP 示例。

无论如何,感谢您的宝贵时间。

最佳答案

我想出了一个小的 JS 脚本,可能会帮助你。它远非完美,但可能会给你一个不错的起点。本质上,它循环遍历您的大文本并寻找出现的滚动条。您可能需要稍微更改计算。

JSFiddle http://jsfiddle.net/Tt9sw/2/

JS

var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');

$.fn.hasOverflow = function() {
var div= document.getElementById($(this).attr('id'));
return div.scrollHeight>div.clientHeight;
};

for(var x=0; x<wordArray.length; x++){
var word= wordArray[x];
currentCol.append(word+' ');
if (currentCol.hasOverflow()){
currentCol = currentCol.next('.col');
}
}

HTML

<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>

CSS

.col{
width:200px;
float:left;
height:200px;
border:1px solid #999;
overflow:auto;
font-family:tahoma;
font-size:9pt;
}

更新

对于此示例,您必须包含 jQuery Libray在你的脚本中。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"  type="text/javascript"></script>

PS - 如果您开始了解 jQuery,您就会开始将它用于一切。它大大提高了跨浏览器的兼容性并简化了许多常见任务。

关于php - 在不同的 div 中继续溢出文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7400174/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com