停止截断使用css和javascript的可变高度div中的文本，其中< p>元素作为孩子 [英] Stopping cut off text in variable height div with css and javascript that has <p> elements as children

问题描述

我有一个div，没有固定的高度，并有几个< p> 块作为孩子。我一直试图使用文本溢出或线夹，但似乎这些不适用于孩子们。这导致文本有时在中间被切断。我要尝试用< br> 替换< p> 喜欢有一个更好的方法来做到这一点。我还不知道页面渲染之后的高度，所以我不能预先计算模板中的任何东西。

I have a div that doesn't have a fixed height, and has several <p> blocks as children. I've been trying to use text-overflow or line-clamp, but it seems like these don't apply to the children. This causes the text to sometimes be cut off in the middle. What I'm going to try is replacing the <p> blocks with <br>, but it seems like there should be a better way to do this. I also don't know the height until after the page has rendered, so I can't precompute anything in a template. Does anyone have a more sensible approach to this problem?

编辑：添加示例

<div class="content">
<p>a big chunk of text</p>
<p>another chunk of text</p>
</div>

css就像

.content {text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2;}

我尝试了不同的混合和匹配方法仍然会有一些< p> 块被切断。

知道 - 有人建议可能有一些其他css干扰？页面上有很多CSS，所以这是可能的。

If this looks OK please let me know - someone suggested there could be some other css interfering? There is a lot of css on the page so this is possible.

编辑：另一个澄清。截止是垂直的，而不是水平的。

Another clarification. The cutoff is a vertical one, not a horizontal. The text on the bottom gets cut off in the middle, or for example a character like a j or y will have the tail cut off.

推荐答案

下面的文本在中间被截断，例如像aj或y这样的字符将被截断。

由于overflow：hidden;，文本正在水平切割，并且div的高度不足以用于文本内容。

The text is getting cut in half horizontally due to the "overflow:hidden;", and the height of the div not being sufficient for the text content.

什么是约束div的高度？

What is constraining the height of the div?

这篇关于停止截断使用css和javascript的可变高度div中的文本，其中< p>元素作为孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！