CODEWITHSUNDEEP
cssword-wrap
Jeeyoung Kim
Jeeyoung Kim

Reputation: 6078

CSS - word-wrap with input and label DOM elements

Link to jsfiddle: http://jsfiddle.net/WBZng/1/

I have a HTML structure that looks like this:

<div>
    <input/>
    <span>Label comes here...</span>
</div>

Both input and span should have display:inline. Also, span has word-wrap:break-word so that a long text without space still becomes wrapped. However, if the text is long, then the <span> is displayed in a new line instead of preserving display:inline-block. This is not an issue if there is a space in <span>.

Upvotes: 0

Views: 2353

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You can consider giving ellipsis to the span element:

.panel span {
    width: 20px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
​

Fiddle: http://jsfiddle.net/WBZng/3/

Upvotes: 1

Related Questions