1

我有一些文本附加到 div,然后在其上应用Boxfit jquery 插件。这会<span>在父 div 中创建一个。这然后允许文本溢出,即使在<span>创建之前,它也可以正常工作。我试过了:

  1. 将溢出添加到跨度
  2. 将高度/宽度添加到继承的跨度
  3. 将溢出添加到<div>的父<div>级,但这会弄乱我的 jquery ui 句柄以调整大小
  4. 将显示从默认table-cell更改为blockinline-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>
4

2 回答 2

1

I added

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

and that seemed to take care of everything. Thanks for the help though!

于 2013-07-25T21:39:35.370 回答
1

您是否尝试过使用其他 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? */
于 2013-07-25T19:37:30.283 回答