Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/
The CSS code we are using is as follows:
div {
display: inline-block;
border: solid 1px black;
padding: 10px;
max-width: 200px;
}
We are dealing with two scenarios here. If the contents are less than 200px in width, the div will resize to fit snugly around the content, leaving exactly 10px of space between the last word and the right border.
However, when the contents exceed 200px, the div will always remain at a fixed width of 200px, even if the text inside it wraps onto multiple lines but doesn't reach 200px in total. In such cases, the word that extends farthest to the right within the div will be at least 10px away from the right border. My goal is to adjust the div so that there is always precisely 10px of space between the rightmost word and the border, while keeping the text left-aligned and adhering to the max-width property.
I've experimented with properties like word-wrap, word-break, and white-space. Setting a specific width won't work since it gets overridden by the max-width. Do you have any suggestions on how to achieve this? Is it even possible? Thank you!