Max-Width Paragraph in Absolute Container - html

Question

I want a paragraph inside an absolutely positioned element to break the text at a specified max-width, but not fill the entire space if the content is smaller.
<p>Text
<span class="cite">Reference
<span class="citeBox">A long sentence that needs to have a line break.</span>
</span>.
Text
<span class="cite">Reference
<span class="citeBox">Short</span>
</span>
Text.
</p>
.cite {
position: relative;
}
.cite .citeBox {
position: absolute;
max-width: 400px;
left: 0;
/*...*/
}
http://jsfiddle.net/8ebsLc6L/1/
That is, the Short-Box should only be small and the Big-Box should break at 400px. All boxes need to dynamically move with the reference span.
The current code does not expand the Big-Box to 400px.
The solution should not require Javascript.
Would much appreciate your help!

Answer 1

I believe it is not possible to achieve what you want by only modifying your CSS.
However, I think I managed it by adding another <span> element.
The problem here is that the width of .cite is passed down to its children.
But you can work around that by adding another element between them with
position: absolute;
with: 400px;
Such an element will be invisible by default, but it will catch mouse events, so you might want to prevent that, using
pointer-events: none;
From the most inner element, you can now remove the position, left and bottom attributes, but instead add
display: inline-block;
This is necessary in order to display the box as a block in case the text requires more than one line, but still keep it at the lowest width and height possible.
And you might want to re-enable pointer events on the most inner element too:
pointer-events: all;
All the above packed into a fiddle: http://jsfiddle.net/8ebsLc6L/4/

Answer 2

Here is one way of doing it.
Wrap your text in a span element, .citeWrap, and assign the background color, border-radius and so on. Note that you do not need the max-width property anymore.
For .citeBox, set width: 400px.
What will happen is that the .citeWrap will use the 400px as the working width to lay out the text and the line box will be no longer than 400px.
However, if the text is shorter than 400px, the span, being an inline element, will have a shrink-to-fit width, so you will get the background color just covering the text.
.cite {
position: relative;
color: blue;
}
.cite .citeBox {
position: absolute;
width: 400px;
left: 0;
bottom: 20px;
}
.cite .citeWrap {
padding: 5px 15px;
background-color: rgba(0, 0, 0, .6);
border-radius: 5px;
color: #fff;
font-size: 1.2rem;
display: inline-block;
}
p {
margin-top: 4.0em; /* for demo only */
)
<p>To visualize an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behavior. This may be why algorithm visualizations are so unusual, as designers experiment with novel forms to better communicate. Here is Brets wonderful
<span class="cite">Reference<span class="citeBox"><span class="citeWrap">A long sentence that needs to have a line break. Make it a bit longer and you see multiple lines.</span></span></span>.
To visualize an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behavior. This may be why algorithm visualizations are so unusual, as designers experiment with
<span class="cite">Reference<span class="citeBox"><span class="citeWrap">Short</span></span></span>
novel forms to better communicate. Here is Brets.</p>