前端 - css中多行省略号不生效的问题?
为什么全是字母多行省略不生效
.item { width: 100px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } <div class="item"> abcdefghijhlmnljjasufoqwhfesadhfjasdflasdjfalsfjla;skdnfvkasldjlsafpwqeuriwehfklsdahvjsahdf </div>
文字多行省略生效
.item { width: 100px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }<div class="item"> 哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚</div>
共有2个答案
你把内容改成中文就能正常显示省略号，说明这个CSS是没问题的，只是英文会出问题，因为英文你这又没有空格区分单词，浏览器会认为这是一个单词，不拆分单词，就成这样了，你在加个word-break: break-all;这一句，拆分单词强制换行就能正常显示省略号了，或者你不加这句，在内容里用空格区分好正常的单词，也是可以正常显示的
加上这个word-break: break-all;
-
问题内容： 第二行的CSS ，这可能吗？我在网上找不到。 例： 我想要的是这样的： 但这是怎么回事： 问题答案： 工作要求是（，等）的单行版本。这意味着文本永远不会到达第二行。 嗯 在纯CSS中不可能。 编辑 如果优秀的CSS众神将实现我们可以使用（new）和（new）在纯CSS中进行模糊处理。 编辑2 WebKit / Blink具有：将省略号放在第二行。
-
问题内容： 我有一个基于flexbox的布局。两列，一列固定大小，第二列需要占用其余空间。在成长列中，我有一个字符串，希望将其剪切掉。 在Chrome中可以正常运行。但它在Firefox和IE中不起作用。我试图通过使用相对位置和绝对位置来给grow（flex item）内部元素一个宽度来修复它，但是随后我得到了一个损坏的布局。损坏与元素的高度未考虑其所有子元素有关。 注意：flex grow项目内
-
我不知道为什么这个简单的CSS不起作用... null null 应该在第4次“测试”前后切断
-
我一直在使用空格：不换行，文本溢出：省略号和溢出：隐藏的CSS属性为多行文本创建省略号截断。但是，这在使用弹性框时不起作用。 使用flex时，text-overflow:省略号似乎总是将flex项的高度截断为一行。 对于多行文本，是否可以使用flex和css省略号截断的组合？ 我可以让它在单行截断的情况下工作。手动设置高度与flex空格：nowrapp不起作用。
-
我的应用程序中有一段很长的文本，我需要将其截短并在末尾添加三个点。 如何在React Native Text元素中做到这一点？ 谢啦
-
问题内容： 我不知道为什么这个简单的CSS无法正常工作… 应该切断第四次“测试” 问题答案： 仅在满足以下条件时起作用： 元素的宽度必须限制为（像素）。宽度（百分比）无效。 元素必须具有并设置。 您在这里遇到问题的原因是因为您的元素的不受限制。您确实有一个设置，但是因为该元素设置为（即默认值），所以它忽略了它，并且也没有其他任何约束其宽度的方法。 您可以通过执行以下任一操作来解决此问题： 将元素设