String Attribute Values in Multiple Lines, HTML

String attribute values in multiple lines, HTML

Yes that's possible:
https://stackoverflow.com/a/38874964/3135511
The secret is to use tab's instead of space
As well as to use linebreaks

<a href=" bla  bla bla  bla bla bla  bla bla  bla ">....</a>

Break up HTML attribute values into multiple lines

I do not believe HTML attributes have an "attribute" continue construct like line continues in Javascript or command lines.

So this doesn't really work:

// This is just whitespace, so I assume the browser will encode it
href="https://cdn.jsdelivr.net/npm/
      bootstrap@5.0.2/dist/css/
      bootstrap.min.css"

// Javascript variety
href="https://cdn.jsdelivr.net/npm/" +
     "bootstrap@5.0.2/dist/css/" +
     "bootstrap.min.css"

// Command line variety
href="https://cdn.jsdelivr.net/npm/" \
     "bootstrap@5.0.2/dist/css/" \
     "bootstrap.min.css"

It's just whitespace within the attribute, or quoted strings untethered to an attribute like in the above examples.

This is the best I could come up with:

<script>
let link = document.createElement('link')

link.rel = 'stylesheet'
link.href = 'https://cdn.jsdelivr.net/' +
            'npm/bootstrap@5.0.2/' +
            'dist/css/bootstrap.min.css'

document.head.append(link)
</script>

You may be able to do some Tidying to find and remove the unnecessary whitespace in certain tag attributes. If the point is to format the browser's View Source markup for readability, though, it would defeat that purpose.

How can I use a multiline value for an HTML tag attribute? (i.e. how do I escape newline?)

From what I remember about the HTML standard, character entities work in attributes, so this might work:

<sometag someattr="This is a multiline string.
This is the part after the newline." />

I'm not sure if the "newline" you want ought to be (\n) or (\r\n), and I'm not sure if browsers will interpret it the way you want.

Why do you need it? What specific problem are you trying to solve by adding a newline in an HTML tag attribute?

Is there a way to write a really long HTML attribute value in more than one line?

Actually the code should still work even if you cut the line in half. HTML will view the entire bit of code as one line until it hits the line break, the ">". If your editor is giving you an error on the broken line try running it and if it doesn't work still then there might be another issue. Just make sure that you don't put a space in between it. So for example

<img src="https://www.google.com/logos/doodles/2016
/25th-anniversary-of-armenias-independence-6257593681969152.2-hp2x.jpg"

data-alt-src="https://www.google.com/logos/doodles/2016/us-
voter-registration-day-reminder-5701453076234240-hp2x.gif" />

Would work but

<img src="https://www.google.com/logos/doodles/2016/25th-
   anniversary-of-armenias-independence-6257593681969152.2-hp2x.jpg"

data-alt-src="https://www.google.com/logos/doodles/2016
  /us-voter-registration-day-reminder-5701453076234240-hp2x.gif" />

Would not.

How does one write HTML attributes over more than one line?

Without knowing exactly what your question refers to, it's hard to say; but it's worth pointing out that html is more or less insensitive to white-space, so

<img src="path/to/image.png" height="200px" width="400px" class="title" id="mainTitle" onClick="alert('clicked')" style="display: block; float: right; position: relative;" />

is equivalent to

<img
src="path/to/image.png"
height="200px"
width="400px"
class="title"
id="mainTitle"
onClick="alert('clicked')"
style="display: block; float: right; position: relative;" />

I'm not wholly certain that it's possible, or valid, to separate the attribute/value pairs across lines, but certainly each pairing can be separated from the next/previous pair.

Incidentally, even Notepad allows for line-wrapping (under 'edit' or 'view', I'm not sure which since I switched to Linux full-time a few years back).

Multiple Lines for Long Attribute Value in Jade / Pug

I have this same problem but in a knockoutjs context. I used the backslash like so.
Previously:

div(data-bind="template: {name: 'ingredient-template', data: $data}")

Now:

div(data-bind="template: {\
    name: 'ingredient-template',\
    data: $data}")

Note: The backslash must be followed immediately by a newline. I'm not sure if this is the 'official' way, I just did it and it seems to work. One downside of this method is the strings then get rendered with the white space intact. So the above example gets rendered as:

<div data-bind="template: {                    name: 'ingredient-template',                    data: $data}">

This might make it unusable for your example.

Edit Thanks Jon. The var idea from your comment is probably better though still not ideal. Something like:

-var arg  = "M10 315 "
-arg += "L 110 215 "
-arg += "A 30 50 0 0 1 162.55 162.45 "
-arg += "L 172.55 152.45 "
-arg += "A 30 50 -45 0 1 215.1 109.9 "
-arg += "L 315 10"
h3 Arcs
  svg(width="320px", height="320px")
    path(d=arg, 
    stroke="black", fill="green", 
    stroke-width="2", fill-opacity="0.5")

Not sure that the extra characters are worth the reduction in line length.

HTML DOM - spreading the string to multiple lines

You should use <br> instead of \n. And use Template Strings rather than using + again and again.

let monster_hp = 100.00let player_hp = 90.00function send_stats(message) {  document.querySelector("#stats").innerHTML = message;}send_stats(`Stats:<br>Player hp:${player_hp}<br>Monster hp:${monster_hp}`)

<div id="stats"> <script src="script.js"></script></div>

---

Related Topics