While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box.
The <div> in question goes through two stages: one where it is not expanded, and another where it is. To address the first stage, I applied the following CSS:
div.todo-item-title{
display: inline-block;
max-width: 90%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
top: 50%;
transform: translateY(-50%);
}
With this CSS, I achieved the desired effect as shown here:
https://i.sstatic.net/SV2kp.png
This setup includes specific properties like max-width: 90%, overflow: hidden, white-space: nowrap, and text-overflow: ellipsis to ensure proper handling of the text. The result meets my expectations.
But when transitioning to the second state, where the parent container (the black box in the image) expands in height, I faced a new challenge – I needed the text to fully display and wrap if necessary.
To tackle this issue, I adjusted the CSS for the text as follows:
div.todo-item-title{
display: inline-block;
max-width: none;
text-overflow: initial;
white-space: normal;
overflow: auto;
position: relative;
top: 4px;
}
In this updated configuration, key modifications include setting the max-width to none for text wrapping, changing white-space to normal, and utilizing overflow: auto to display a scrollbar when needed.
However, upon implementation, the outcome was different than expected, as shown here:
https://i.sstatic.net/knKzl.png
Despite these changes, the text still does not wrap as intended. What could be causing this issue?