I've got a phone number in my markdown that tends to break over the end of the line. In HTML I could wrap it in a <nobr> tag to have it keep together properly. What is the correct way to do this in markdown?
You can use non-break hyphen character ( ‑ )
1‑111‑111‑1111
for
1-111-111-1111
Or you could need the phone number format with spaces in between, then use no-break space character ( )
1 111 111 1111
for
1 111 111 1111
Apparently I didn't realize you could just embed html in markdown.
<nobr>[1-111-111-1111](tel:11111111)</nobr>
works fine
The 'nobr' tag is non-standard HTML, and while it is supported by browsers for legacy purposes, the correct way is to handle it via CSS.
CSS equivalent:
.nobr { white-space:nowrap; }
Related
I have an MVC3 app that has a details page. As part of that I have a description (retrieved from a db) that has spaces and new lines. When it is rendered the new lines and spaces are ignored by the html. I would like to encode those spaces and new lines so that they aren't ignored.
How do you do that?
I tried HTML.Encode but it ended up displaying the encoding (and not even on the spaces and new lines but on some other special characters)
Just style the content with white-space: pre-wrap;.
div {
white-space: pre-wrap;
}
<div>
This is some text with some extra spacing and a
few newlines along with some trailing spaces
and five leading spaces thrown in
for good
measure
</div>
have you tried using <pre> tag.
<pre>
Text with
multipel line breaks embeded between pre tag
will work and
also tabs..will work
it will preserve the formatting..
</pre>
You can use white-space: pre-line to preserve line breaks in formatting. There is no need to manually insert html elements.
.popover {
white-space: pre-line;
}
or add to your html element style="white-space: pre-line;"
You would want to replace all spaces with (non-breaking space) and all new lines \n with <br> (line break in html). This should achieve the result you're looking for.
body = body.replace(' ', ' ').replace('\n', '<br>');
Something of that nature.
I was trying the white-space: pre-wrap; technique stated by pete but if the string was continuous and long it just ran out of the container, and didn't warp for whatever reason, didn't have much time to investigate.. but if you too are having the same problem, I ended up using the <pre> tags and the following css and everything was good to go..
pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
As you mentioned on #Developer 's answer, I would probably HTML-encode on user input. If you are worried about XSS, you probably never need the user's input in it's original form, so you might as well escape it (and replace spaces and newlines while you are at it).
Note that escaping on input means you should either use #Html.Raw or create an MvcHtmlString to render that particular input.
You can also try
System.Security.SecurityElement.Escape(userInput)
but I think it won't escape spaces either. So in that case, I suggest just do a .NET
System.Security.SecurityElement.Escape(userInput).Replace(" ", " ").Replace("\n", "<br>")
on user input.
And if you want to dig deeper into usability, perhaps you can do an XML parse of the user's input (or play with regular expressions) to only allow a predefined set of tags.
For instance, allow
<p>, <span>, <strong>
... but don't allow
<script> or <iframe>
There is a simple way to do it. I tried it on my app and it worked pretty well.
Just type: $text = $row["text"];
echo nl2br($text);
In HTML5, if you include <pre> for example on a paragraph text, the result won't display '<pre>' on the paragraph, and it will run the command <pre> on the words after it.
What I have to do display texts including signs like " " or <> on a text, without running the command.
How can I accomplish this?
What you're looking for are known as HTML entities: characters that are reserved, and which automatically get parsed to the the relevant HTML. Using these tags allow you to write out the entities that would usually automatically get parsed as HTML.
For example, attempting to write out the <pre> tag within a parent <pre> tag will normally result in the inner tag being treated as HTML:
<pre><pre>The relevant tags surround this text</pre></pre>
Though using the HTML entities < and > for the left and right bracket respectively parses the entities as HTML, where they get displayed as text:
<pre><pre>The relevant tags surround this text</pre></pre>
A full list of HTML entities can be found here.
Hope this helps! :)
The 'best' way is to replace every < and > element with < and >:
But if you want to do it fast, you can use the xmp tag. It's deprecated but is still supported by all browsers
<xmp>
<div>Lorem ipsum</div>
<p>Hello</p>
</xmp>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp
You need to escape the provided content to display it as-is, without it being interpreted as HTML.
https://github.com/sindresorhus/escape-goat
This involves taking the reserved characters for the given language (e.g. HTML) and converting them to a representation that either uses an escape sequence or only uses unreserved characters.
In this case, HTML prescribes the use of entities to display characters that would otherwise be used by the syntax for tags and attributes within the source code itself.
Due the change line would lead space between characters. I'm using wbr for stop creating space between charaters, like this:
<p><wbr
></wbr>这里有一段很长,<wbr
></wbr>很长的文字;这里<wbr
></wbr>有一段很长,很长<wbr
></wbr>的文字;这里有一<wbr
></wbr>段很长,很长的文<wbr
></wbr>字;</p>
I just wonder if there is a better solution? Maybe... is there any HTML entity could remove all front space?
HTML entities are used to represent reserved characters like angle brackets.
One objective of web development is to separate style from structure from presentation. That's why this problem must be solved with JavaScript, not HTML.
To do it, you would simply select the element from the DOM and use the replace method. To replace all instances of whitespace do the following
var wbr = document.getElementsByTagName("wbr");
wbr.innerHTML = wbr.innerHTML.replace(/\s/g, '');
To replace only leading and trailing whitespace do this
wbr.innerHTML = wbr.innerHTML.trim();
I have an MVC3 app that has a details page. As part of that I have a description (retrieved from a db) that has spaces and new lines. When it is rendered the new lines and spaces are ignored by the html. I would like to encode those spaces and new lines so that they aren't ignored.
How do you do that?
I tried HTML.Encode but it ended up displaying the encoding (and not even on the spaces and new lines but on some other special characters)
Just style the content with white-space: pre-wrap;.
div {
white-space: pre-wrap;
}
<div>
This is some text with some extra spacing and a
few newlines along with some trailing spaces
and five leading spaces thrown in
for good
measure
</div>
have you tried using <pre> tag.
<pre>
Text with
multipel line breaks embeded between pre tag
will work and
also tabs..will work
it will preserve the formatting..
</pre>
You can use white-space: pre-line to preserve line breaks in formatting. There is no need to manually insert html elements.
.popover {
white-space: pre-line;
}
or add to your html element style="white-space: pre-line;"
You would want to replace all spaces with (non-breaking space) and all new lines \n with <br> (line break in html). This should achieve the result you're looking for.
body = body.replace(' ', ' ').replace('\n', '<br>');
Something of that nature.
I was trying the white-space: pre-wrap; technique stated by pete but if the string was continuous and long it just ran out of the container, and didn't warp for whatever reason, didn't have much time to investigate.. but if you too are having the same problem, I ended up using the <pre> tags and the following css and everything was good to go..
pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
As you mentioned on #Developer 's answer, I would probably HTML-encode on user input. If you are worried about XSS, you probably never need the user's input in it's original form, so you might as well escape it (and replace spaces and newlines while you are at it).
Note that escaping on input means you should either use #Html.Raw or create an MvcHtmlString to render that particular input.
You can also try
System.Security.SecurityElement.Escape(userInput)
but I think it won't escape spaces either. So in that case, I suggest just do a .NET
System.Security.SecurityElement.Escape(userInput).Replace(" ", " ").Replace("\n", "<br>")
on user input.
And if you want to dig deeper into usability, perhaps you can do an XML parse of the user's input (or play with regular expressions) to only allow a predefined set of tags.
For instance, allow
<p>, <span>, <strong>
... but don't allow
<script> or <iframe>
There is a simple way to do it. I tried it on my app and it worked pretty well.
Just type: $text = $row["text"];
echo nl2br($text);
Writing documentation in html requires some code examples. What to do with characters that should be replaced with & and > etc.? Should they be encoded in this case too? When I have these characters inside of <pre><code> tags, they display like they should as far as I can see.
Yes, you should use HTML entities inside of <pre> and <code>. Some browsers are forgiving, but leaving < and > as non-entities won't work in all cases.
If you don't you'll eventually come across code like: print "</code>". And it won't work non-escaped.