CODEWITHSUNDEEP
html
Isaac Kleinman
Isaac Kleinman

Reputation: 4452

Break up Long title attribute Value

I have an web page which has tooltip set as follows:

title="Tel: {%- recordFields.providerTel || 'N/A' %} Email: {%-recordFields.providerEmail || 'N/A' %}"

The line occupies 142 columns...

Is there a way to break up the title string in the source so that it can span multiple lines?

Something along these lines:

title="Tel: {%- recordFields.providerTel || 'N/A' %}  \
Email: {%-recordFields.providerEmail || 'N/A' %}"

Upvotes: 2

Views: 280

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075915

In a comment on the question I asked:

You only want it to span multiple lines in the source, right? The actual value shouldn't have newlines (e.g., when used)?

and you said:

Let's say that. In this particular case, I also want a newline in the output, but I'll remove it for clarity.

It's a really fundamental part of the question. :-)

If you do want the newlines, the answer is easy but (to my mind) unsatisfying: Just put them in, literally:

        <div title="Tel: {%- recordFields.providerTel || 'N/A' %} 
Email: {%-recordFields.providerEmail || 'N/A' %}">...</div>

Live example. Note that it's important not to have leading whitespace on the next line, because that whitespace is part of the attribute value. This is what makes it unsatisfying to me, because having that subsequent line start at column 0 in something that's otherwise indented seems unclean (and some tools will fight with you, trying to indent it).

If you don't want the newlines in the attribute's value, I'm not aware of a way to do it. According to the HTML specification, an attribute's value is "...Attribute values are a mixture of text and character references...", and if we follow that link for "text" it doesn't say anything about putting source-only linebreaks in the value.

Since you seem to be using some kind of templating engine, if it runs server-side then you could of course define a property on the values object to hold the title string:

title="{%- getTitleFor(recordFields) %}"

...but that moves the content out of your HTML source (where content generally belongs) into your server-side language source, so it's not a great alternative.

Upvotes: 1

Related Questions