2013-07-25 130 views
1

我有一些文本附加到一个div,然后在其上应用Boxfit jquery plugin。这会在父div内创建一个<span>。然后这允许文本溢出,事实上在创建<span>之前,它工作正常。我已经试过:跨度文本溢出Div

  1. 添加溢出跨度
  2. 添加HEIGH /宽到inhereits
  3. 添加溢出到<div>的父<div>跨度但这打乱了我的jQuery UI的处理调整大小
  4. 量变到质变的显示从默认table-cellblockinline-block

我不知道究竟如何为p罗奇,所以对此的任何帮助将是非常棒的。我试图使用高度继承和显示/ posiiton变化,但没有到目前为止。谢谢!下面是代码:

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> 
+0

你可以添加一个jsfiddle,boxfit插件作为外部资源吗?这将帮助其他人测试它更容易 –

+0

我试图重新创建它,但没有看到溢出http://jsfiddle.net/feitla/MCPct/1/ – feitla

回答

0

您是否尝试过使用其他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? */ 
1

我加

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

这似乎照顾一切。感谢您的帮助!