关于JS控制内容显示

BatiTan 2010-03-19 07:37:24

现在是这么个想法，因为对JS了解不深，希望高手帮忙
=====
我有一个字数很多的文本内容，包含各段落文字
网页大小限制在480px*320px，全部用来显示文本内容
如何才能计算一个屏幕显示了多少文字
然后知道下一屏幕要显示接下来的文本内容
=====
我想到可以用行数来解决
涉及段落标记的直接为一行
其他则是满一行计算一行
但也还要考虑字体因素在内

希望有人能帮我想想这个如何控制

...全文

242 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

BatiTan 2010-03-21

打赏
举报

[Quote=引用 6 楼 sharp_ice 的回复:]
提供个思路给你：
1.设置好p标签的样式，使得出现p的地方跟br一样，主要是设置p的margin属性。比如

HTML code

<style type="text/css">
.output p
{
margin:0px;
}
</style>
假设你在下面这个div中显示内容
<div class="output">
</div>

还有就是line-h……
[/Quote]
谢谢.呵呵,很有用

蓝色_冰点 2010-03-19

打赏
举报

提供个思路给你：
1.设置好p标签的样式，使得出现p的地方跟br一样，主要是设置p的margin属性。比如



<style type="text/css">

.output p

{

    margin:0px;

}

</style>

假设你在下面这个div中显示内容

<div class="output">

</div>

还有就是line-height 和字体大小等样式，这样可以知道你一行字有多长。建议用宋体字。

2.写一个计算字符串长度的函数，其中字体选择对这个函数有重要关系。有些字体比如说字母i会比字母m等宽度要小得多，但有些是一样宽的，宋体字就是字母都是一样宽的。而中文字一个字的宽会是半角字的两倍。当然这个函数还要对p和<br>等进行判断

这样就差不多了

BatiTan 2010-03-19

打赏
举报

[Quote=引用 3 楼 danica7773 的回复:]
如果只有文字，没有HTML的话，还是比较简单的，

利用line-height和你所限定的高度作比较，看最多显示几行，半行不算。

HTML code

<div id='articleBox'>
你的文章......
<div class='cover'></div>
</div>

articleBox的大小设置为你要求的大小，cover采用绝……
[/Quote]谢谢这么细致的分析和回复
HTML代码涉及段落标记，其他能无就无
<html>
<body>
<p>....</br>...</br>... ...</p>
</body>
</html>
基本就是这么简单的内容

BatiTan 2010-03-19

打赏
举报

[Quote=引用 1 楼 sharp_ice 的回复:]
意思是说，要在一个矩形范围内，计算能显示多少字吧？

而你又要判断字体大小，还有词的换行等各种因素。估计很难办到

换种思路试试吧，比如说允许滚动条的出现
[/Quote]如果不考虑字体大小，是不是可行呢
因为我想连屏实现，因此不用滚动条
如果用滚动条的话就简单了。

打字员 2010-03-19

打赏
举报

如果只有文字，没有HTML的话，还是比较简单的，

利用line-height和你所限定的高度作比较，看最多显示几行，半行不算。



<div id='articleBox'>

    你的文章......

    <div class='cover'></div>

</div>

articleBox的大小设置为你要求的大小，cover采用绝对定位，

cover的高度 = articleBox高度 - parseInt（articleBox高度/ 文字行高）* 文字行高

用以盖住显示半行的文字。

显示下一页的时候，就让articleBox的scrollTop增加 (articleBox高度 - cover的高度)

如果有HTML代码，那就麻烦了。。。

我的想法是：不知道。。。

嘿嘿！

skyvu 2010-03-19

打赏
举报

[Quote=引用 1 楼 sharp_ice 的回复:]
意思是说，要在一个矩形范围内，计算能显示多少字吧？

而你又要判断字体大小，还有词的换行等各种因素。估计很难办到

换种思路试试吧，比如说允许滚动条的出现
[/Quote]
同意，只能换思路，你说的不容易实现，还有html标签的样式呢
，<div style="height:33px;width:330px;">dd</div>你说这个要占几行几个字呢？

蓝色_冰点 2010-03-19