Question

我有一些文字附加到div然后在其上应用Boxfit jquery plugin。这会在父div中创建<span>。然后，这允许文本溢出，尽管在创建<span>之前，它仍然可以正常工作。我试过了：

向范围添加溢出
将高度/宽度添加到无法跨越的范围
向<div>的父<div>添加溢出但这会弄乱我调整大小的jquery ui句柄
将显示内容从默认table-cell更改为block和inline-block

我不确切知道如何继续，所以对此的任何帮助都会很棒。我正在尝试使用高度继承和显示/位置更改，但到目前为止还没有。谢谢！这是代码：

CSS：

.text-block
{
    cursor: default;
    height: 100%;
    overflow: hidden;
    width: 100%;
    line-height: normal;
}

HTML：

<div class="template-1of3X template-droppable ui-resizable text review ui-draggable font-oxygen selected" style="top: 351px; width: 256px; height: 151px; position: absolute; left: 27px;">
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000; display: block;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000; display: block;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000; display: block;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000; display: block;"></div>
<div class="text-block" style="display: table;">
<span class="boxfitted" style="display: table-cell; font-size: 14px;">One whiff and you know this is serious stuff. The aromas of baking brioche, coconut, candied citrus and leather pick up roasted coffee and grilled nuts on the palate, permeating the senses. Profound depth and complexity, offering a unique Champagne experience. Drink now through 2006. 40,000 cases made. –BS</span>
</div>
</div>

Answer 1

我添加了

.text-block span 
{
    height:inherit;
    width:inherit;
    overflow:inherit;
    text-overflow: ellipsis;
    /*position:inherit;*/
}

这似乎照顾了一切。谢谢你的帮助！

Answer 2

您是否尝试过使用其他CSS运算符，例如：

white-space:pre; /* or pre-wrap - Text will wrap when necessary, and on line breaks. */

word-wrap:break-word; /* this allows unbreakable words to be broken. */

text-wrap:unrestricted; /* Lines may break between any two characters? */

Span中的文字溢出Div

2 个答案: