Text in Span overflows Div

Question

I have some text I append to a div and then apply the Boxfit jquery plugin on it. That creates a <span> within the parent div. This then allows the text to overflow, eventhough before the <span> is created, it works fine. I've tried:

1. Adding overflow to the span
2. Adding heigh/width to the span that inhereits
3. Adding overflow to the <div>'s parent <div> but this messes up my jquery ui handles for resize
4. Changeing the display from the default table-cell to block and inline-block

I don't know exactly how to proceed, so any help on this would be awesome. I'm trying to use height inheritance and display/posiiton changes, but nothing so far. Thanks! Here is the code:

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

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!

Answer 2

Have you tried using other CSS operators such as:

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? */