1

I have searched a lot on google and can't seem to find what to do with a line of CSS that is really long. If I want to split that code and finish it in another line, how do I go about doing this? Should I do it? for example:

src: url("http://ThisIsAReallyLongURL/thatIneedToTryandgetonAsecondLine")

would I do it like this?

src: url("http://ThisIsARreallyLongURL/thatIneed\
        ToTryandgetonAsecondLine")

Any help would be appreciated. Thanks!

Garrett F
  • 21
  • 2
  • 3
    Not a duplicate. They are asking about long lines in their actual CSS, not how to use CSS to wrap long lines in the html. – Anthony May 17 '18 at 01:06
  • 2
    and what is the purpose of doing this ? it's not a programming issue but a manner to write code ... so this is more an opinion based or tools suggestion – Temani Afif May 17 '18 at 01:11
  • @Anthony Ok. Pick one of the others then. I clicked on the wrong one. – Rob May 17 '18 at 01:12
  • I don't think this is possible, based on the fact that the only way to add content using the "content" rule with line breaks is by using `\A `. Since they don't have an easier way to allow line breaks where they would be necessary, I doubt there is a way to do it in other places where it would just be for beautifying. – Anthony May 17 '18 at 01:13
  • @Rob - you pick one if you see it. I couldn't find one. I was just providing clarification. – Anthony May 17 '18 at 01:14
  • @Temani Afif: Don't mix up "is it better to hard-wrap or not to hard-wrap my CSS" (opinion-based) than "how do I hard-wrap my CSS" (*not* opinion-based). Also be sure that you're not treating a question as opinion-based just because you have a different opinion of what the asker is doing. You may think it's not necessary to hard-wrap, but you still need to respect the asker's personal preference of doing so. – BoltClock May 17 '18 at 04:03
  • @BoltClock it's not about having a different opinion, but the Asker asked two questions : "how do I go about doing this?" --> this one is for me too broad or it's more searching for a tools to autmaticaly do it. Then he asked "Should I do it?" --> from this one I understand that we want some *opinions*. He's not sure if he should do it or not, so based on that [what I understand] I thought it's opinion based. – Temani Afif May 17 '18 at 09:24
  • @Temani Afif: Oh, I missed that "Should I do it?" Yeah that should probably be removed. I really don't understand what's so broad about the how-to question. If that is too broad, then every other how-to CSS question is too broad. – BoltClock May 17 '18 at 09:29

1 Answers1

1

You can add a backslash to the end of your url on the first line, and continue your url on the next line with no indents. This even works when split on more than two lines.

.fruits {
  background-image: url("https://s7.postimg.cc/u8an7ndqz/frui\
ts.jpg");
  height: 500px;
}
<div class="fruits"></div>

Here is a jsFiddle: https://jsfiddle.net/katerynas/rryrqyvw/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kateryna S
  • 124
  • 5