How to prevent webkit from breaking long text


I want to display URL in a status bar. I want that status bar has only one line a handles overflow with text-overflow:ellipsis.

Long URLs always break like this: jadajajajaj-

I want it to be like jadajajajaj-jadajajajdaj-ajdj...

I got only as far as:

    <div style="position:fixed;top:12.7ex;left:0ex;display:inline-block;width:100%;z-index:5;text-overflow:ellipsis;background:inherit;">
        <div id="status-bar" class="ui-corner-all"
            style="width:1000%;display:inline-block;margin-right:1.4ex;padding:0.3ex 0.5ex 0ex 1ex;overflow-y:hidden;overflow-x:hidden;color:grey;font-size:3.3ex;height:3.2ex;font-weight:normal;text-align:left;"></div>

I am using width:1000% to overcome this problem, but I will not see ... ellipsis like this.

I tried to fix it with CSS properties -webkit-hyphens:none, word-wrap:normal, nothing just works... I am missing word-wrap: keep-all. This is not recognized in current version of chrome 20.0.1132.57 m.

Problem courtesy of: honzajde


You're looking for the text-overflow property. By applying text-overflow:ellipsis and white-space:nowrap to #status-bar, you'll see the desired effect. However, you must set a width for the element to cut off at so the browser knows when/where to append the ellipsis. (Make sure you remove or change width:1000% )

#status-bar {
 text-overflow: ellipsis;
 width: 100%; /* or whatever you prefer */
 white-space: nowrap;
Solution courtesy of: Vin Burgh


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.