css - CSS - 入力およびラベル DOM 要素を使用したワードラップ

Question

jsfiddle へのリンク: http://jsfiddle.net/WBZng/1/

次のような HTML 構造があります。

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

inputとの両方spanが必要display:inlineです。また、スペースのない長いテキストでも折り返されるようにしていますspan。word-wrap:break-wordただし、テキストが長い場合、<span>は保持されずに新しい行に表示されますdisplay:inline-block。にスペースがあっても問題ありません<span>。

Answer 1

要素に与えることを検討できますellipsis：span

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

フィドル: http://jsfiddle.net/WBZng/3/