How to Break Lines in Urls in Stylesheet

How to break lines in URLs in stylesheet

You do this by enclosing the URI in quotes, and appending a \ to the end of each line you want to break, followed by a newline, within the URI. The parser will treat the string in the URI as though the \ and the immediately following newline were not there.

When doing this with a URI that is not a Base64-encoded data URI, you need to make sure there is no indentation inside the string or the link will not work. This is because whitespace is significant in a URI. Whitespace is not significant in a Base64 string, so leaving indentation in a Base64-encoded data URI is fine, but that's a property of Base64 strings, not URIs. If this confuses you, for the sake of simplicity never indent.

Here's an example:

#circle {  width: 16px;  height: 16px;  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ\CAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvw\AAAB6SURBVDhP3ZPLEcAgCERpwSYpLi3YgrWkBbLAIYHJZEi45fBUPq4jColIhIjBBmAF1Mc5/zSIBl\jmekZzRhTwzbuZNTTXRGCZQOXkzHIBv3MOVmEVmMn5hqkCd4EyPxFoF7H5jJiwaHwkDJiaX1lxkY/Nd\MVrUmxnoQPGWQ2Hnu//1wAAAABJRU5ErkJggg==');}

<div id=circle></div>

Force a line break in a URL

Try playing with the white-space CSS property.

Check this link for more info: http://perishablepress.com/press/2010/06/01/wrapping-content/

Break huge URLs so they don't overflow

CSS3 has a new feature:

word-wrap:break-word;

You can see a live example here (you must have a browser compatible with that new feature).

It's also the same tecnique adopted by StackOverflow, if you examine your long URL you will notice.

Alternatively you can try Hyphenator.

How to line-break a link in a list

display: inline-block is doing just that: displaying block elements inline, but treating the element like a block on its own. Changing it to display: inline will instead display the text like a normal inline text.

Then, you don't even need the word-wrap anymore.

ul {  border: 1px solid red;  width: 150px;  list-style: none;  margin: 0;  padding: 0;}
li {  display: inline;}
li::after {  content: '\2022';  margin-left: 5px;}

<ul><li><a href="#">foo bar</a></li><li><a href="#">some long sentence</a></li><li><a href="#">another one</a></li><li><a href="#">third</a></li></ul>

How to line-break from css, without using br /?

Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.

I suggest using spans that you will then display as blocks (just like a <div> actually).

p span {  display: block;}

<p><span>hello</span><span>How are you</span></p>

How to display a long link in multiple lines via CSS?

There is a CSS Property called "word-break" which you may find useful:

div {
    background: red;
    width: 200px;
    height: 200px;
    word-break: break-all;
}

Reference: W3Schools word-break information

How do I stop links from wrapping onto multiple lines in a CSS drop down menu?

Adding white-space: nowrap; and removing float for child menu's lis is enough:

.sf-menu .sub-menu li {
    white-space: nowrap;
    float: none;
}

---

Related Topics