Currently, I am in the process of enhancing a webpage that contains a significant amount of old legacy code. One issue I have encountered pertains to text wrapping within a fixed-height and width container, as illustrated in the image below:
https://i.sstatic.net/FiMPW.png
The first image shows the default behavior when the text is short enough to fit on one line.
The second image showcases the desired outcome: If the text needs to wrap, the container should expand in size accordingly without overlapping, similar to what is shown in the third image.
Removing the fixed-width or fixed-height constraints is not an option as it results in unpleasant inconsistencies. This was the initial problem that I aim to address.
I have attempted to resolve this by using z-index and adjusting positioning, but so far, I have had no success.
An example of a line that wraps due to its length.
.element {
margin: 15px 7px;
display: inline-block;
overflow: hidden;
position: relative;
color: #222;
max-height: 523px;
max-width: 300px;
}
.element img {
vertical-align: top;
}
.element h2 {
text-align: center;
background: #333333;
padding: 12px 0;
font: 400 16px/22px 'Roboto Slab',serif;
margin: 0;
color: #fff;
border-top: 1px solid #333333;
text-transform: uppercase;
}
.element h2 a {
color: #fff;
text-decoration: none;
font: 400 16px/22px 'Roboto Slab',serif;
}
.element span.view {
display: block;
text-align: center;
background: #fff;
padding: 12px 0;
font: 400 16px/22px 'Roboto Slab',serif;
margin: 0;
}
.element span.view a {
text-decoration: none;
color: #333333;
}
body {
background: #111;
}<div class="element" sort-id="1">
<a href="index.cfm?sendung_id=518">
<img src="http://startv.ch/demandit/files/M_75AB1CC4DCE0B2C5F31/dms//Image/CC_Talk_Auslaenderkriminalitaet.jpg"
alt="CC_Talk_Auslaenderkriminalitaet.jpg" border="0">
</a>
<span class="lower-part-of-element">
<h2>
<a href="index.cfm?sendung_id=518">Adrian Amstutz & Esther Egger-Wyss</a>
</h2>
<span class="view">
<a href="index.cfm?sendung_id=518">Ausländerkriminalität</a>
</span>
</span>
</div>You can also view this issue on Codepen.io.