如何控制行数

Silence_Smile 2010-08-09 09:56:14
博客的首页会显示文章的列表,这个时候应该不显示文章的所有内容,而是截取一定的行数,后面用。。。
然后加个阅读全文的链接。
要怎么样控制这个行数呢?控制div的height的话是强行截断的,有可能出现半个字的情况。如果先设置div的line-height的话也不行,因为内容的高度是不一定的,取决于文章内容的字体字号。
用<table>行么?或者JS?会的来说下!
...全文
266 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
qysnowqy 2010-08-09
  • 打赏
  • 举报
回复

function init(){
var a="额哦你就是你不是你妮妮你我我额维啊额人人他哦了啊我饿他一我了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊";
var newDivNode = $("<div>")
.attr("id", "index")
.html(a)
.css("border","1px blue solid")
.css("height","48px")
.css("font-size","14px")
.css("width","142px")//因为字体是14px,border是1px,所以div为142px可以显示10个字
.css("overflow","hidden")//根据6楼提示把多余的隐藏了,开始本来准备帮你计算高度的(楼主也可以自己根据高度来设置提取字符的长度),可好像字体的高度不是14px,而是15px,不知道为什么?
.appendTo($(document.body));
}

运行之后可以看到后面的"啊啊啊啊啊啊。。。"那些字符串没显示出来。
loveunittesting 2010-08-09
  • 打赏
  • 举报
回复
文章列表页面显示的文章内容,应该是不带格式的才行,否则你根本无法控制,应该提取出一定数量的文字内容,去掉Html格式,用固定的字体显示在文章列表中,行数很难固定,因为字体并不是等宽的,所以提取出来的文字行数也不太固定,会有点出入。只能用4楼的那方方法,overflow:hidden样式来隐藏多余的文字,只要控制好div的高度,就不会出现半个字的情况。
lakesea 2010-08-09
  • 打赏
  • 举报
回复
请参考CSS的定义:


text-overflow版本:IE6+专有属性 继承性:无
语法:
text-overflow : clip | ellipsis
取值:
clip :  默认值。不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)

说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
要强制溢出发生并且应用 ellipsis 值,作者必须设置对象的 white-space 属性值为 nowrap 。
假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。
为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。
通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。
此属性为在DHTML中制作省略标记提供了高效的方法。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textOverflow 。
示例:
div { overflow: hidden; text-overflow:ellipsis; }
lakesea 2010-08-09
  • 打赏
  • 举报
回复
<div style="border:1px solid red;width:100px;height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
中文哦好打了近飞洒的了开发记得撒空间费的撒娇发的非科技萨菲萨德飞洒地方离开的萨菲了空间色拉肯德基发送了的积分撒了肯德基发
</div>

如果是table的话,style定义到tb上,并且在table 上定义以下style
<table border="1px" style="width:100px;table-layout:fixed">
Silence_Smile 2010-08-09
  • 打赏
  • 举报
回复
没人知道么?
Silence_Smile 2010-08-09
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 sositesine 的回复:]

那你是想高度固定呢还是字数固定呀?

我觉得你这种情况应该设置字数固定吧。
你要固定DIV高度,而不固定字体字号,那想一个极端的情况
字号特别大,那时不是就显示一个字然后就。。。了?或者甚至一个字都显示不下。

所以我觉得你这种需求应该是固定字数,至少得让人能够看出来你这个文章大概是个什么东西,
而不是想办法固定DIV高度。

真就是想固定DIV高度,那就一起把字体字号设置好吧……
[/Quote]
其实我是想固定高度或者行数,但是不能出现半个字的情况
只要不出现这样的情况就行
强长黑粗硬 2010-08-09
  • 打赏
  • 举报
回复
那你是想高度固定呢还是字数固定呀?

我觉得你这种情况应该设置字数固定吧。
你要固定DIV高度,而不固定字体字号,那想一个极端的情况
字号特别大,那时不是就显示一个字然后就。。。了?或者甚至一个字都显示不下。

所以我觉得你这种需求应该是固定字数,至少得让人能够看出来你这个文章大概是个什么东西,
而不是想办法固定DIV高度。

真就是想固定DIV高度,那就一起把字体字号设置好吧
Silence_Smile 2010-08-09
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 yys79 的回复:]

文章列表页面显示的文章内容,应该是不带格式的才行,否则你根本无法控制,应该提取出一定数量的文字内容,去掉Html格式,用固定的字体显示在文章列表中,行数很难固定,因为字体并不是等宽的,所以提取出来的文字行数也不太固定,会有点出入。只能用4楼的那方方法,overflow:hidden样式来隐藏多余的文字,只要控制好div的高度,就不会出现半个字的情况。
[/Quote]
我发现现存的博客好像都是不带格式的,就这样吧,结贴了!
Silence_Smile 2010-08-09
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 yys79 的回复:]

文章列表页面显示的文章内容,应该是不带格式的才行,否则你根本无法控制,应该提取出一定数量的文字内容,去掉Html格式,用固定的字体显示在文章列表中,行数很难固定,因为字体并不是等宽的,所以提取出来的文字行数也不太固定,会有点出入。只能用4楼的那方方法,overflow:hidden样式来隐藏多余的文字,只要控制好div的高度,就不会出现半个字的情况。
[/Quote]
恩,如果字体大小定了,控制好div的高度就行了

81,092

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧