- 主题:如何截取字符串适配固定大小的div
具体需求是这样的,每个div中显示一段具体的文本detail, 但是detail可能会很长,而div的长宽是固定的,字体和字体大小,line-height也知道。想做成这样的效果:
str: 1111111111111111111222222222222222222222222222223333333333333333
<div class="detail_info">
111111111111111111222222222...
</div>
后台是php, 有个想法是在后台先处理str, 把放在detail_info中的前缀字符串先计算出来放在数据库里,但是没找到怎么计算的方法。
前台js也可以,但感觉自己写轮子效率比较低,有没有更好的方式?
--
修改:speedmancs FROM 121.236.219.*
FROM 121.236.219.*
这很简单吧,就是输出时候检测长度,超长就截断+....
【 在 speedmancs 的大作中提到: 】
: 具体需求是这样的,每个div中显示一段具体的文本detail, 但是detail可能会很长,而div的长宽是固定的,字体和字体大小,line-height也知道。想做成这样的效果:
: str: 1111111111111111111222222222222222222222222222223333333333333333
:
: ...................
--
FROM 58.251.201.*
不是单纯的文字长度,是网页上所占的宽度之和。
【 在 zxdong262 (zxd) 的大作中提到: 】
: 这很简单吧,就是输出时候检测长度,超长就截断+....
--
FROM 222.130.138.28
一种方法是因为固定宽高,可以定下个最大的字符长度,根据字体和最极限情况的容纳的最小长度,以这个长度为准截取。
如果要稍微智能一点,可以把文字原样输出,前端js检测高度,根据高度对应百分比的文字,再截取。
【 在 shaolin 的大作中提到: 】
: 不是单纯的文字长度,是网页上所占的宽度之和。
:
--
FROM 58.251.201.*
text-overflow: ellipsis;
【 在 speedmancs (活好每一天) 的大作中提到: 】
: 具体需求是这样的,每个div中显示一段具体的文本detail, 但是detail可能会很长,而div的长宽是固定的,字体和字体大小,line-height也知道。想做成这样的效果:
: str: 1111111111111111111222222222222222222222222222223333333333333333
: <div class="detail_info">
: ...................
--
FROM 180.173.112.*
主要是效率问题,一开始我参考网上的一个js代码实现了一个,效率很低,页面刷很久才能刷出来。后来二分实现了,速度还可以。
var wordLimit = function(){
$(".tutor_preview_detail").each(function()
{
var original = $(this).text();
var start = 0;
var end = original.length;
while (end > start)
{
//alert("start:" + start);
//alert("end:" + end);
var mid = Math.ceil((end + start) / 2);
//alert("mid:" + mid);
$(this).text(original.substring(0, mid + 1));
$(this).html($(this).html() + "... ");
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute', 'height': 'auto', 'overflow': 'visible'});
$(this).after(copyThis);
if (copyThis.height() > $(this).height())
{
end = mid;
}
else{
start = mid + 1;
}
copyThis.remove();
}
});
};
【 在 zxdong262 (zxd) 的大作中提到: 】
: 一种方法是因为固定宽高,可以定下个最大的字符长度,根据字体和最极限情况的容纳的最小长度,以这个长度为准截取。
: 如果要稍微智能一点,可以把文字原样输出,前端js检测高度,根据高度对应百分比的文字,再截取。
--
FROM 121.236.219.*
布局问题用布局框架,不要老想着自己写CSS,自己写的CSS很难达到高手框架布局的水平。
【 在 speedmancs 的大作中提到: 】
: 具体需求是这样的,每个div中显示一段具体的文本detail, 但是detail可能会很长,而div的长宽是固定的,字体和字体大小,line-height也知道。想做成这样的效果:
: str: 1111111111111111111222222222222222222222222222223333333333333333
: <div class="detail_info">
: ...................
--
FROM 124.42.13.*
这个不用自己计算,就用css就行了啊,百度搜
【 在 speedmancs (活好每一天) 的大作中提到: 】
: 具体需求是这样的,每个div中显示一段具体的文本detail, 但是detail可能会很长,而div的长宽是固定的,字体和字体大小,line-height也知道。想做成这样的效果:
: str: 1111111111111111111222222222222222222222222222223333333333333333
: <div class="detail_info">
: ...................
--
FROM 111.204.252.*
不兼容
【 在 tiplip (FlyingEagle) 的大作中提到: 】
: 这个不用自己计算,就用css就行了啊,百度搜
--
FROM 124.207.70.*
是用text-overflow吗,试了一下没用啊。
【 在 tiplip (FlyingEagle) 的大作中提到: 】
: 这个不用自己计算,就用css就行了啊,百度搜
--
FROM 167.220.232.*