Does HTML support a behavior of text rendering where multiple lines will be avoided with an automatic placement of "..." ? Sorry, I just cannot find the style/tag associated with this behavior, if it exists!
No, there is nothing built in.
You need to either do it yourself serverside, or write some JavaScript that will count lines and replace the rest of the line with an ellipsis (...).
There is a text-overflow-mode defined in the CSS3 spec that will do this, but as a working draft it is not final and will not necessarily work on current browsers.
The property you're looking for is the CSS text-overflow: ellipses. Unfortunately it does not work in Firefox. Here is a resource on it:
http://www.css3.info/preview/text-overflow/
You can kind of hack it in Firefox, with e.g.
http://www.jide.fr/english/emulate-text-overflowellipsis-in-firefox-with-css
But the only real cross-browser solution would be a JavaScript one, like this maybe, or perhaps one of the ones in the comments on this page:
http://ajaxian.com/archives/ellipsis-or-%E2%80%9Ctruncate-with-dots%E2%80%9D-via-javascript
Short answer: No.
Longer answer: This is possible if you're using a programming backend (e.g. PHP) that outputs HTML to the front end. You could do something like
<?php
if(str_len($yourText) > 100) {
echo substr($yourText, 0, 100) . "...";
}
?>
Related
In VS Code I am having trouble in formatting HTML.
For example, I write a list of tags inline and I press Shift+Alt+F and nothing happens.
I noticed this:
If I write:
<div><span><p></p></span></div>
nothing happens when I do the auto format.
If I write:
<div><div><div></div></div></div>
then it becomes:
<div>
<div>
<div></div>
</div>
</div>
hope this will help you to help me...
We had the same problem in my dev team. Please check or try the following things:
Are the keyboard bindings correct?
Is selected code language HTML?
Have you restarted VS code?
Begin a small piece of the formatting and then try again (for some reason it
thinks its already correct.
There are a certain list of tags that are ignored when auto formatting - these are defined in the setings.json file under
html.format.unformatted":
So go to settings (Command-Comma on a mac) and search for that setting and remove the tags you do want formatting.
The bad news is that it still doesn't format how I think it should - i.e. the isn't indented inside the but it at least puts it on a new line for you!
This is a VS code bug. I installed the 1.17 and it worked very well https://code.visualstudio.com/updates/v1_17
Is it possible in CSS (only) to hide some text of a string?
I know there these attribute-selectores like:
[att^=val] – the “begins with” selector
But for instance, having this:
<div class="some_random_text">
This is a default text
</div>
I want to (display: none) only a certain substring - in thise case "default". I know how to do it with JS, but I'm looking for a CSS-solution only (if there is any).
Even though I guess it isn't possible to manipulate the DOM via CSS, which would be neccessary to have something like:
this is a <span class="hideThis">default</span> text
why would you need this and where does it occur?
For instance in a CMS (in my case OXID). You can add a title to a specific payment-method. Here I have
paypal
paypal (provider1)
paypal (another dude)
I want to have only PayPal visible in the frontend. The other PayPal-Paymenttypes have to remain however. Naming them all PayPal just leads to confusion.
there is the content-property. Is it somehow managable with that?
Again, no JS :-)
To answer your question - no, it's not possible using only CSS.
You can;
Edit the HTML as you suggested
this is a <.span class="hideThis">default<.span > text
Use JS to alter the elements innerHTML value
Use a pre-processing language (like PHP or ASP, whatever you are able to use) to reduce the string to a substring.
Sorry if that's not the answer you wanted, but those are your options.
It it not possible. The only thing that can actually modify the inside text is the content property. Assuming something changes in your dom, you can have rules like:
.some_random_text:after {
content: "This is a text";
}
other_select .some_random_text:after {
content: "This is a default text";
}
But sincerely, I don't get the point, as JS and consors are made for that.
It's not possible, here's the documentation on selectors: https://www.w3.org/TR/css3-selectors/#selectors
I use Markdown and HTML for my lecture notes, and when I need an unusual character like Natural join I have to use the unmemorable code ⋈ (⋈). Is there any way I can define a symbol, like &MYNATJOIN; in a CSS file (or wherever) that would be replaced with the ⋈ at HTML rendering time?
ccp
You can use the character “⋈” as such in HTML, provided that you use UTF-8 and declare it properly, as you should anyway; see my Guide to using special characters in HTML.
Alternatively, much less reliably, you can use the HTML5 character reference ⋈. It belongs to the added named references that are completely unnecessary and are not supported by any browser version older than 2011.
In order to define your own entitiy that you could use as &MYNATJOIN;, you would need to serve your document with an XML content type, which means that old versions of IE will choke on it and that it will be processed in Draconian mode (i.e., any violation of XML well-formedness constraints will cause just an error message to be shown to users, no document content). Under these conditions, you can use XML entity declarations.
CSS is for optional presentational suggestions and should not be used to add significant content, due to the CSS caveats. If you would use “⋈” for decorative purposes or to visually highlight something that is already duly emphasized verbally or in markup, you can add it to the rendering using generated content, e.g.
.funny:after { content: " ⋈" }
in order to append a space and the “⋈” character to the content of every element in class funny.
You can add a small javascript to the top of your document to do a global replace on your "user defined entity with the entity you want it to refer to. This function runs when the document is loaded.
JS (In <head> tag)
window.onload=function () {
document.body.innerHTML=document.body.innerHTML
.replace(/&MYNATJOIN;/gi,"⋈");
};
HTML (In <body> tag)
these are some notes. <br />
the entity &MYNATJOIN; should now be a bowtie
You can define more entites by adding more replace statements
See the code snippet below:
window.onload=function () {
console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&MYNATJOIN;/gi,"⋈");
console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&PLUSMINUS;/gi,"∓");
console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&SINEWAVE;/gi,"∿");
};
<body>
these are some notes.<br />
the entity &MYNATJOIN; should now be a bowtie <br />
a plus or minus looks like this &PLUSMINUS; <br />and how about a sine wave? &SINEWAVE;
</body>
Note that:
There are a litany of ways to trigger javascript to run when a document has loaded, but window.onload is simple and gets the job done.
The replacement uses a regular expression as that is a requirement for doing a global string replace in javascript.
Any & in an HTML document are implicitly converted to & by the HTML parser.
HTML
<span class='mynatjoin'><span/>
CSS
.mynatjoin:before{
content: "\22C8";
}
Result
⋈
JSfiddle
If you want it to be even simpler, and your willing to break your HTML validity, you could use tags, instead of classes like this:
HTML
<mynatjoin />
CSS
mynatjoin:before{
content: "\22C8";
}
Result
⋈
JSfiddle
I dont know if this will cause problems in some browsers, but I tested this in the latest, Chrome, FF an IE. It worked. Probably wont work in older browsers.
If you want to do it the way you specified i.e &MYNATJOIN;, then you will need to use some sort of javascript which scans the document and replaces &MYNATJOIN; with ⋈. I don't think it is possible with pure html and css
Based on the example above, you can have multiple css classes to support your symbols. You can use this to find the css code for your corresponding symbol.
This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 3 years ago.
I'd like to add an area to a page where all of the dynamic content is rendered as plain text instead of markup. For example:
<myMagicTag>
<b>Hello</b> World
</myMagicTag>
I want the <b> tag to show up as just text and not as a bold directive. I'd rather not have to write the code to convert every "<" to an "<".
I know that <textarea> will do it, but it has other undesirable side effects like adding scroll bars.
Does myMagicTag exist?
Edit: A jQuery or javascript function that does this would also be ok. Can't do it server-side, unfortunately.
You can do this with the script element (bolded by me):
The script element allows authors to include dynamic script and data blocks in their documents.
Example:
<script type="text/plain">
This content has the media type plain/text, so characters reserved in HTML have no special meaning here: <div> ← this will be displayed.
</script>
(Note that the allowed content of the script element is restricted, e.g. you can’t have </script> as text content (it would close the script element).)
Typically, script elements have display:none by default in browser’s CSS, so you’d need to overwrite that in your CSS, e.g.:
script[type="text/plain"] {display:block;}
You can use a function to escape the < >, eg:
'span.name': function(){
return this.name.replace(/</g, '<').replace(/>/g, '>');
}
Also take a look at <plaintext></plaintext>. I haven't used it myself but it is known to render everything that follows as plain text(by everything i mean to say it ignores the closing tag, so all the following code is rendered as text)
The tag used to be <XMP> but in HTML 4 it was already deprecated. Browser's don't seem to have dropped its support but I would not recommend it for anything beyond quick debugging. The MDN article about <XMP> lists two other tags, <plaintext> and <listing>, that were deprecated even earlier. I'm not aware of any current alternative.
Whatever, the code to encode plain text into HTML is pretty straightforward in most programming languages.
Note: the term similar means exactly that—all three are designed to inject plain text into HTML. I'm not implying that they are synonyms or that they behave identically—they don't.
There is no specific tag except the deprecated <xmp>.
But a script tag is allowed to store unformatted data.
Here is the only solution so far showing dynamic content, as you wanted.
Run code snippet for more info.
<script id="myMagicTag" type="text/plain" style="display:block;">
<b>Hello</b> World
</script>
Use Visible Data-blocks
<script>
document.querySelector("#myMagicTag").innerHTML = "<b>Unformatted</b> dynamic content"
</script>
No, that's not possible, you need to HtmlEncode it.
If your using a server-side language, that's not really difficult though.
In .NET you would do something like this:
string encodedtext = HttpContext.Current.Server.HtmlEncode(plaintext);
In my application, I need to prevent HTML from rendering
"if (a<b || c>100) ..."
and
"cout << ...".
Also the entire C++ code region HTML must pass through the GCC compiler with the desired effect. I've hit on two schemes:
First:
//<xmp>
#include <string>
//</xmp>}
For reasons that escape me, the <xmp> tag is deprecated. I find (2016-01-09) that Chrome and FF, at least, render the tag the way I want. While researching my problem, I saw a remark that <xmp> is required in HTML 5.
Second, in <head> ... </head>, insert:
<style type="text/css">
textarea { border: none; }
</style>
Then in <body> ... </body>, write:
//<br /> <textarea rows="4" disabled cols="80">
#include <stdlib.h>
#include <iostream>
#include <string>
//</textarea> <br />
Note: Set "cols="80" to prevent following text from appearing on the right. Set "rows=..." to one more line than you enclose in the tag. This prevents scroll bars. This second technique has several disadvantages:
The "disabled" attribute shades the region
Incomprehensible, complex comments in the code sent to the compiler
Harder to understand
More typing
However, this methhod is neither obsolete nor deprecated. The gods of HTML will make their faces to shine unto you.
Yes, I am struggling with displaying data from our database that CONTAINS markup! One particular field I am displaying has an open-bold tag but no close bold tag. I am trying to 'contain' this markup so it doesn't affect the rest of the page.
The data coming from my database is like this text:
this is soem nasty <b>data
(note the lack of a closing < /b > tag)
If I enclose the markup in a div, the rest of the page is bold:
<div>this is some nasty <b>data</div>
However if I wrap it in a table like this:
<table><tr><td>this is some nasty <b>data</td></tr></table>
All is well! In fact, the DOM inspector for both FF (FireBug) and IE9 show the tree. In the div-case, it shows the open-b tag and the rest of the document contained within it. But the table seems to enclose it.
How can I get this to 'close the b' without a table?
You use a closing </b> tag properly, like any sane human being.
You can use DOMDocument and tidy to try and fix the malformed markup in case you have no control over it, but it's best if you could fix it before it got to your database.
I've read somewhere that HTML Purifier should be able to achieve this. Might be worth trying.
I took a cue from HTML rich-text editors like TinyMCE and built up an IFrame. It seems to contain the arbitrary, possibly-mal-formed content better.