如何在样式表的URL中换行 [英] How to break lines in URLs in stylesheet

问题描述

我有一个样式表，其中的行很长（数据URL）。
反正我可以将这些行分成较小的行吗？

I have a stylesheet with really long lines (data urls). Is there anyway I can break those lines into smaller lines?

长行示例：

background-image: url(data: image/png;base64, really long string);

推荐答案

为此，您可以将URI括在引号中，然后在URI中，在要中断的每一行的末尾添加 you ，并在其后添加换行符。 解析器会将 URI中的字符串视为 \ 和紧随其后的换行符不存在。

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.

使用未经Base64编码的URI进行此操作时数据URI，则需要确保字符串内没有缩进，否则链接将不起作用。这是因为空格在URI中很重要。在Base64字符串中，空格并不重要，因此可以将缩进保留在Base64编码的数据URI中，但这只是Base64字符串的属性，而不是URI。如果这使您感到困惑，为简单起见，切勿缩进。

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.

这里是一个示例：

#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>

这篇关于如何在样式表的URL中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！