是否可以使用CSS将文本长度限制为"n"行(或者在垂直溢出时将其剪切).
text-overflow: ellipsis; 仅适用于1行文本.
原文:
Ultrices natoque mus mattis,aliquam,cras in pellentesque tincidunt
elit purus lectus,vel ut aliquet,elementum
nunc nunc rhoncus placerat urna!坐下来看看!Ut penatibus turpis
mus tincidunt!Dapibus sed aenean,magna sagittis,lorem velit
想要输出(2行):
Ultrices natoque mus mattis,aliquam,cras in pellentesque
tincidunt elit purus lectus,vel ut aliquet,elementum ...
我想用JavaScript来计算字符串的宽度.这是否可以在不使用等宽字体的情况下实现？
如果它不是内置的,我唯一的想法是为每个字符创建一个宽度表,但这是非常不合理的,特别是支持Unicode和不同的类型大小(以及所有浏览器).
同
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
如果溢出,"......"将显示在行尾.但是,这只会在一行中显示.但我希望它以多行显示.
它可能看起来像:
+--------------------+
|abcde feg hij dkjd|
|dsji jdia js ajid s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
我有一个弹性布局的网页,如果调整浏览器窗口大小,它会改变其宽度.
在这种布局中,标题(h2)将具有可变长度(实际上是我无法控制的博客标题的头条新闻).目前 - 如果它们比窗户宽 - 它们分成两行.
是否有一个优雅的,经过测试的(跨浏览器)解决方案 - 例如使用jQuery - 缩短了标题标签的innerHTML,如果文本太宽而无法放入当前屏幕的一行,则会添加"..."容器宽度？
jsfiddle:http://jsfiddle.net/Y5vpb/
HTML:
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look</span>?
CSS:
span{
display:inline-block;
width:180px;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
它的工作方式与预期一致,它打印: Lorem Ipsum is simply du...
现在,我想做同样的事情,但继续失败,创建以下示例:
jsfiddle:http://jsfiddle.net/9HRQq/
HTML:
<div class="textContainer">
<img src="#" …我想知道是否有任何聪明的方法,以实现css 省略号效果,而无需申请white-space: nowrap.
换句话说,假设我们有一个特定高度的块元素,我们想让它充满文本内容,但是一旦水平加上垂直方向没有空间,就应该应用省略号..
快速示例:http://jsfiddle.net/fpv9n/2/
文本应该像它一样,但最后也有省略号.有没有办法用CSS实现？我也会考虑JS解决方案.
我正在尝试使用CSS在JavaScript中创建一个自动换行,条件是:
如果DIV包含一个非常长的单词,例如"asdasfljashglajksgkjasghklajsghl",我想显示:
|asdasfljashglajk...|
如果DIV包含一个长句,例如"如果我每次被告知我不能得到一分钱",我想显示:
|if i had a dime for|
|everytime i was... |
我使用HTML,CSS,JavaScript.我不能使用jQuery.
如果有可能请告诉我.
使用jQuery dotdotdot插件,我想有一个更多和更少的按钮来显示和隐藏<div>当有很多文本要显示时的整个内容." 更多"按钮工作正常,但我还没有找到一种方法来返回<div>它的原始显示.请注意,这不仅仅是关于如何使用dotdotdot扩展截断的字符串,因为它包含Less按钮重新截断长字符串.
这是我的代码:
$(function() {
$("div.ellipsis-text").dotdotdot({
after: 'a.more',
callback: dotdotdotCallback
});
$("div.ellipsis-text").find("a").click(function() {
if ($(this).text() == "More") {
var div = $(this).closest('div.ellipsis-text');
div.trigger('destroy').find('a.more').hide();
div.css('max-height', '');
$("a.less", div).show();
}
else {
$(this).text("More");
$(this).closest('div.ellipsis-text').css("max-height", "50px").dotdotdot({ after: "a", callback: dotdotdotCallback });
}
});
function dotdotdotCallback(isTruncated, originalContent) {
if (!isTruncated) {
$("a", this).remove();
}
}
});
看来,click事件处理程序<div>的锚标记是越来越删除,我从来没有能够在后到达事件处理程序的更多按钮被点击.
解决方案:
$(function() {
$("div.ellipsis-text").dotdotdot({
after: 'a.more', …是否可以在jQuery中检索元素的指定字体？
让我们说有css:
#element
{
font-family: blahblah,Arial;
}
在上面的示例中,Arial字体将分配给#element.有没有办法通过JS/JQuery获取该信息？
就像是:
$('#element').css('font-family');
只返回 blahblah,Arial;
我有一个列表,divs其中显示较长文档的预览.文档使用不同的字体样式.所以我没有恒定的线高.这是一个例子:http://jsfiddle.net/z56vn/
我只需要显示每个文档的前几行.我们已经确定300px是正确的.如果我只设置一个max-height300px到divs,那么根据文本属性(大小,填充,边距),最后一行的底部会被剪裁.
如何max-height为接近300px但不会导致剪裁的每个块设置一个？
该解决方案可以使用CSS,Javascript和jQuery.
这两个问题是相似的,但他们的解决方案采用恒定的线高.