Html CSS-文本溢出不适用于大文本

所以我有这个：

.texto{
宽度：400px；
位置：相对位置；
身高：100%；
溢出：隐藏！重要；
文本溢出：省略号！重要；
-o-text-overflow：省略号！重要；
空白区：nowrap！重要；
显示：块！重要；
}
asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdASDASDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASDAASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDASSDasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdaasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdaasdasdasdaasdaasdasdasdasdasdasdasdasdasdasdSDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDASDAS

这是一个大的文本，但是文本溢出只处理第一行，我需要的是让它在文本末尾添加“…”。我在Google上找不到任何有助于找到解决此问题的方法，我缺少了什么？

来自

文本溢出

的文档：

---

此属性仅影响内联进程方向上溢出块容器元素的内容（例如，不影响框底部溢出的文本）

---

不能使用

文本溢出

在框底添加省略号。它只适用于内联文本。

嗯……你贴的小提琴对我有用。你在用什么浏览器？谷歌浏览器。这就是问题所在吗？刚刚在Opera和Firefox上进行了测试，得到了相同的结果：wsdasdas asda sd asdasda asdasd asdasdas…@user2197736您所要求的是不可能的，请看我的答案。那么使用Javascript如何？无意冒犯，但我无法得到您解释的35%。那我该怎么做？你不明白的部分是什么？“在它的内联前进方向”和结尾的部分。没关系，我现在明白了。如果我使用Javascript，我能解决这个问题吗？因为我没有从另一个人那里得到答案，他的脚本很好，但这不是我需要的，我相信你的答案更合适，所以我将其标记为最佳答案。谢谢你的大力支持。

    <style>

.texto {
width:400px;
position:relative;
height:100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
white-space: nowrap !important;
display:block !important;
}
</style>

<div class="texto">
wsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdaswsdasdasdas asda sd as asdasda asdasd asda sdasdasd asdasdasd asd asdas</div>