限制使用CSS的div中的字符数

我有溢出的div：隐藏和其中的一些文本，最后一行半途可见。我应该怎么做才能隐藏div的最后一行？甚至添加一些省略号。限制使用CSS的div中的字符数

是可以做到这一点与CSS只？（我并不想改变字体大小，或改变显示：隐藏）

HTML：

<div> 
    Hello World, Hello World, Hello Booom 
</div>

风格：

div { 
    height:100px; 
    width:50px; 
    overflow:hidden; 
    border:1px solid black; 
}

我'喜欢看到所有的文字没有“繁荣”或代替你好动臂 - 赫尔...

来源

2015-10-06 Marcin Doliwa

改变字体大小如所提到的其他浏览器使用CSS前缀？改变盒子的大小？改变溢出？使用js来计算可见的内容并剥去其余的内容？有很多方法。猜猜你需要更具体。 – m02ph3u5

你想要一个类似省略号的“Read more”/“Read less”按钮吗？ – Jay

请尝试像这样http://jsfiddle.net/xp32ekqc/1/ –

-1

尝试：

text-overflow:ellipsis; 
white-space: nowrap;

在你的css中。我希望你的帮助。我附上一个链接到的jsfiddle：JSFiddle Demo

来源

2015-10-15 11:14:00

我们作为一个堆栈溢出在这里，你宁愿你的答案专注于回答这个问题，并省略这样的不必要的绒毛如“你好”。同样，为了改进您的答案，将代码格式化为代码会很有帮助。您还应花时间描述您的答案是如何工作的以及解决问题的方法;这样OP和其他人将来可能会从中学到一些有用的东西。 –

你好我面临同样的问题，如果你的文本是一行然后文本溢出工作正常，但现在你在做不同的东西，即你想......在4或5行后因此您必须在高度应用省略号。

看到这个例子：

div { 
 
    height:90px; 
 
    width:50px; 
 
    overflow:hidden; 
 
    border:1px solid black; 
 
} 
 

 
.myDiv{ 
 
    display: block; /* Fallback for non-webkit */ 
 
    display: -webkit-box; 
 
    -webkit-line-clamp:5; 
 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="myDiv"> 
 
    Hello World, Hello World, Hello Booom 
 
</div>

正如你可以看到在上面的例子中-webkit行钳：5;所以它会添加....在5行。

注意：什么是-webkit

WebKit是Safari浏览器/ Chrome浏览器的HTML/CSS的网页浏览器渲染引擎。

的Web浏览器渲染引擎的列表

IE
- 引擎：三叉戟] [2]
- CSS前缀：-msie
火狐
- 引擎：壁虎] [3]
- CSS-前缀：-moz
歌剧
- 引擎：的Presto] [4]
- CSS -prefix：-o
野生动物园&铬
- 引擎：WebKit的] [5]
- CSS前缀：-webkit

所以对于Safari /铬使用- webkit in css和用于上述

来源

2015-10-16 12:20:44

限制使用CSS的div中的字符数

回答

相关问题