Question

我有包含动态文本的响应框（divs）。文本通常足够短，以适应框中，但有时其中一些更大，不适合。

我尝试使用text-overflow: ellipsis来解决此问题，但这并不理想，因为信息丢失了。媒体查询断点不会有任何帮助，因为它们会影响整个页面，而不仅仅是长文本框。

如何使不合适的文字响应，以便其大小自动缩小以适应其持有人盒？

Answer 1

从另一个类似的问题看看这个答案： https://stackoverflow.com/a/6112914/1129920

使用一点JS，您可以将文本大小调整为div的大小。

Answer 2

我也想要实现它，但我只找到了一个好的工作Js来做到这一点。你能看一看fittext.js

吗？

Answer 3

如果你没有设置div的高度，那么它们里面的文字只会增加div的大小，但不会超出它们。

如果您尝试截断为什么不使用overflow: hidden。

或者，您可以创建一个针对您怀疑可能包含长文本的div的类，并使其具有em值作为大小。而不是px

Answer 4

一种可能的解决方案是将父元素的宽度和高度保持为百分比，然后将子元素设置为内联块。这不是非常低分辨率的完美解决方案，但可以适用于您的情况。

.parent{
    width: 20%; 
    height: 20%;
}

.child{
   display: inline-block;
}