跨度文本溢出Div

我有一些文本附加到一個div，然後在其上應用Boxfit jquery plugin。這會在父div內創建一個<span>。然後這允許文本溢出，事實上在創建<span>之前，它工作正常。我已經試過：跨度文本溢出Div

添加溢出跨度
添加HEIGH /寬到inhereits
添加溢出到<div>的父<div>跨度但這打亂了我的jQuery UI的處理調整大小
量變到質變的顯示從默認table-cell到block和inline-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>

來源

2013-07-25 user576838

你可以添加一個jsfiddle，boxfit插件作爲外部資源嗎？這將幫助其他人測試它更容易 –

我試圖重新創建它，但沒有看到溢出http://jsfiddle.net/feitla/MCPct/1/ – feitla

您是否嘗試過使用其他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-25 19:37:30 Keith

我加

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

這似乎照顧一切。感謝您的幫助！

來源

2013-07-25 21:39:35 user576838

跨度文本溢出Div

回答

相關問題