How to make CSS insert line breaks without white space?

Question

I need help with a bit of CSS I'm trying to use. I'm testing with Chrome, but I need a solution that's not browser-specific.

I have a page divided into two iframes: a narrow one on the left that contains a table of contents, and a wide one on the right that displays a selected page. I want to display the URL of the selected page at the bottom of the left-hand frame. If it's too long to fit in the frame (as it usually is), it should wrap to a second line, and the first line should move up so that the last line remains bottom-aligned.

The structure of the page in the table of contents iframe looks like this:

<body>
   <div>
      <script...> <!--JavaScript that generates the table of contents--> </script>
   </div>
   <div id='showPageUrl' style="height:auto;position:absolute;bottom:0"></div>
   <script...> showURL(document.URL) </script>
</body>

The following function is executed by the JavaScript code that loads pages (from an onclick event), and also by HTML that loads the initial page (above).

   function showUrl(url) {
      var sel = document.getElementById('showPageUrl');
      if (sel!==null) {
         sel.innerHTML = url;
      }
   }

The problem: if the URL is too long to fit on one line it doesn't wrap, because it contains no whitespace characters to wrap at. Instead the frame sprouts a horizontal scroll bar. If I replace the URL with a piece of text that contains whitespace, the text breaks at a whitespace character and displays properly.

I've looked for a CSS property to make the URL break wherever it has to, but I can't find anything. All the line break controls seem to assume there's whitespace and change how the rendering engine treats it.

What must I do to make a URL (with no whitespace) break properly at the end of a line?

score 3 · Answer 1 · edited Sep 03 '19 at 16:14

3

You're looking for the overflow-wrap CSS property (legacy word-wrap):

.example {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

Documentation: http://www.w3.org/TR/css3-text/#overflow-wrap

Browser support: http://caniuse.com/#search=overflow-wrap

DEMO: http://jsfiddle.net/aueL3/2/

edited Sep 03 '19 at 16:14

TylerH

20,799
66
75
101

answered Feb 14 '14 at 15:55

gvee

16,732
35
50

Breaking a URL *anywhere* is not *proper* breaking. For example, breaking after a hyphen is wrong. – Jukka K. Korpela Feb 14 '14 at 17:16
@JukkaK.Korpela this isn't breaking the URL, this is changing the *display* of the URL. The `href` of an anchor tag won't be broken. – gvee Feb 14 '14 at 17:19
Changing the display means breaking it visually just like sp litting a word in display means breaking it. – Jukka K. Korpela Feb 14 '14 at 17:23
@JukkaK.Korpela fair point. Then perhaps the correct answer is to use `text-overflow: ellipsis;`? It would be a preferred method visually however the OP has requested that it is split over multiple lines. – gvee Feb 14 '14 at 17:34
@JukkaK.Korpela: While this may be theoretically true, it is a compromise to not affect the layout of a page negatively. URLs are not “normal” words, especially they are quite often very long, and therefor won’t fit into given container widths. “Breaking” them for displaying purposes is in most cases OK IMHO. – CBroe Feb 14 '14 at 17:56

score 1 · Answer 2 · answered Feb 14 '14 at 15:55

1

#showPageUrl { word-break: break-all; }

For reference: http://www.w3schools.com/cssref/css3_pr_word-break.asp

answered Feb 14 '14 at 15:55

Harvey A. Ramer

763
7
13

score 1 · Answer 3 · edited Sep 03 '19 at 16:14

You can use this CSS to break the URL anywhere that is going to exceed the parent's width.

Here is the CSS:

.text {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

white-space and word-wrap code taken from How do I wrap text with no whitespace inside a <td>?

Finally, a JSFiddle: Demo

Related Question: SO Question

score 1 · Answer 4 · answered Feb 14 '14 at 17:19

This is not really a CSS issue. To specify allowed direct break points, you can use the <wbr> tag or the zero-width space character . You need to decide on the principles of breaking; there are various standards and practices on where a URL can be broken.

Primarily, don’t put URLs into textual content. They should appear in attributes, like href.

score 0 · Answer 5 · answered Apr 24 '16 at 00:22

zero-width space character is perfect for text, but urls are likely to be copied, and when pasted the space will be right there to break them. Since it is invisible, people won't understand what's wrong and will think the url is not working. Since support for wbr is not universal, for a similar issue I split the url in two spans marked with display:inline-block. They split just like an invisible space and don't mess copy & paste (is important to avoid spaces or newlines between them in the html or a space will be visible).

<span style="display:inline-block">firstpartoflongurl</span><span style="display:inline-block">seconfpartofit</span>

*I know this is too old to be useful to the original author, but may help others looking for the same thing

score 0 · Answer 6 · answered May 08 '22 at 08:56

0

Try to use the following line to insert new line by replacing white spaces using css.

white-space: "pre-line"

answered May 08 '22 at 08:56

Codemaker2015

12,190
6
97
81

How to make CSS insert line breaks without white space?

6 Answers6