Can I write some style css code for every • code I use in my page, for example font-size: 16px;? Thanks.
No, you cannot. You cannot style text content, no matter how it’s encoded (either as direct characters or as entities).
The closest thing you can do is put <span class="bullet">•</span> into the document and style the class bullet.
Others have answered the main question; you cannot specify a CSS Rule based on text content (just on HTML elements, classes, and ids).
What you could do is use Javascript, or server-side rendering to do a .Replace() to wrap the character with the necessary HTML tags (replace just the character with a wrapped version of the character).
Here's a quick proof-of-concept; it could easily avoid the jQuery (it's a crutch of mine), and you might play around a bit with how the character is encoded in the Javascript (I had to copy/paste it in to work).
The key portion is:
.replace("•","<span class='bullet'>•</span>")
No. With CSS you can only address elements but not certain characters (ok, there are exceptions like :first-letter). You would need to put it into an element like span:
<span class="bullet">•</span>
Then you can use the selector span.bullet to style these elements:
span.bullet {
font-size: 16px;
}
Related
For some reasons I want that my static blog shows right single quotation mark (’) where there is an apostrophe ('). Is it possible to force it using CSS?
Important: CSS is not meant to change or replace text. You can use some client-side scripting language like Javascript or Server-side languages to do text change functionality
OP Solution
It looks like a font issue, try changing the font that you have or completely removing the font family to troubleshoot. Google Fonts is a good place to start testing your text, if you know your font name and can find it in there.
HAck: If you really want to hack it using CSS, you can wrap your apostrophe (') in a span tag and use :before or :after CSS selector to change its content using the content property. Again it's not recommended to do it and if fonts is an issue, you may see the same behaviour again
Working Example
span {
display: none
}
div:after {
content: '>';
}
<div>Quote <span> ' </span></div>
I'm trying to dynamically set a FontAwesome glyph inside a span or a button through the CSS property attr(property).
What I would like to have is to set an attribute on the tag
<button glyph="\f005"></button>
and then use it in the CSS file like this
button::before{
content: attr(glyph)
}
But it looks like it doesn't work and it just display the code I've written in the tag. Is there a way to "render" the code or to make the CSS consider it as an escaped character?
Take a look at this Fiddle for a quick example.
Try setting the value of the glyph attribute to a HTML entity, such as glyph=""
First of all, your CSS should be button::before or button::after, not only button. You can use content only in these.
Second, in HTML, you write entities like &XXXX;, not \XXXX, you mixed it up a little. Imagine it that the entity becomes single character and then it is transferred into CSS, not in another way. In HTML, you need to use HTML entities and in CSS, use CSS entities, even though they will travel through both languages in some way.
And third, don't use non-standard attributtes like glyph. They should be prepended with data-.
See http://codepen.io/ondrakoupil/pen/XbBvzV
I have a text like this
Html is a Webbased language. For styling the webpage we have to use
the css. For this we have to write the css and include those files.
My expected out put like this:
Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.
HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property.
div {
white-space: pre-line;
}
This will tell the browser to preserve line endings in divs.
EDIT
But if your text does not have newlines after the full stops, you either have to do this with JavaScript as Hashem Qolami pointed out, or serverside using whatever language you have there.
See String.prototype.replace() for how to do this client side.
The correct way to do this would be to use a list. Here's why:
HTML comes with it's own styling provided by H1-H6, p, strong, ul, ol etc. CSS merely adds visual styling.
You're obviously not breaking these lines for "the heck of it".
The output you desire is structured like a list.
The output would be read correctly regardless of the availability of visual styling (css) ex. screen readers etc.
Simple remove the list styling ex.
list-style-type: none;
The answer to your question is not "This can't be done", but you're approaching the problem from the wrong angle. This is not a CSS issue, but a problem with your markup.
Either use pre and make the text have actual line breaks after the periods
<pre>Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.</pre>
Or add html breaks with the <br> element
Html is a Webbased language.<br/> For styling the webpage we have to use the css.<br/> For this we have to write the css and include those files.
This is a old question but people here says it's impossible in html/css etc and no one has contributed with the most simple answer.
Yes, it is possible. You first need to specify that there should be a new line in the string by using "\n".
Then as Jørgen R answered:
"HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property."
So to answer the question.
Change the string to the following:
Html is a Webbased language. \n For styling the webpage we have to use the css. \n For this we have to write the css and include those files.
and add to your css:
.div{
white-space: pre-line;
}
Not doable in CSS. There is no selector that allows you to select a portion of the text. You'll have to add the line breaks "manually" in javascript.
Is there any way to style "u" without surrounding it with additional tags?
something like
h1:first-letter{ font-size:200%; color:#8A2BE2}
"u" I would like to, say, add opacity to is here:
<div class="moto"><h1>it's all<br>abboutt<br>design</h1></div>
You could if there were an nth-letter selector, but there isn't. You aren't the first to have these typographical dreams, however. Try http://letteringjs.com/ which will automate this kind of thing for you.
No. Or, technically speaking, tags are not needed, but the character needs to be made the sole content of an element. You could do that with JavaScript, searching for the first occurrence of the character in some content, then manipulate the DOM tree. It’s easiest to do this using tags, though.
Is there a way to write HTML onto a webpage, but have it rendered as text?
Let me explain: I want to build a webpage with a discussion on HTML. Therefore there will be sections like
<div>
<p>
<span>Hello world</span>
</p>
</div>
I would like that to formatted properly with indentation, and perhaps even have the tags in a different colour scheme.
I'm fully aware that I could write the styling for this myself, but surely someone has already written and made available a stylesheet, a LESS mixin, or perhaps a jQuery plugin which recognises and formats for me?
UPDATE: Just to make people aware, I realise that I have to HTML-encode the tags (< and >). But that doesn't help with the formatting/presentation, and it's the formatting/presentation that I'm looking for help with.
Use the <xmp> tag instead of <pre>.
E.g.
<xmp>
<html>
<body>This is my html inside html.</body>
</html>
</xmp>
You need to convert < and > to HTML entities.
<div>
<p>
<span>Hello world</span>
</p>
</div>
As for color coding, look into Google Code Prettify. Here are some examples.
You are looking for SyntaxHighlighter. See demo page here
As regards to escaping characters, what you need to escape are “<” (as <) and “&” (as &). If you use automated tools, make sure they handle these characters.
To preserve the formatting (line breaks and spacing), you can use <pre> markup. It is best used so that the first line starts immediately (on the same line) after the <pre> tag and the last line is immediately (without linebreak) followed by the end tag </pre>. Otherwise some browsers may display extra empty lines.
The <pre> markup implies a system-dependent monospace font by default. This can of course be changed in CSS. The markup also implies font size reduction on most browsers, presumably to cope with the properties of monospace fonts; you may therefore wish to set font-size to a value (maybe 100%) to match your design.
Alternatively, you can wrap the code inside any block element (like <div>) and set white-space: pre for it in CSS. This means that the formatting is preserved but the font face and size are the same as for surrounding text (unless you explicitly set it).
You may additionally use <code> markup to indicate the content as computer code. It, too, sets the font to monospace and reduced-size but is otherwise purely logical. If you wish to indicate the language used, then class=language-html would be the way suggested in HTML5 drafts. This has no direct impact as such; it just makes it easier to style your HTML code samples consistently and to recognize them in JavaScript processing if needed.
Example:
<pre><code class=language-html><div>
<p>
<span>Hello world</span>
</p>
</div></code></pre>
As above I it is always a good idea to use the HTML characters to display the demonstration of HTML so always use **<** for < and **>** for < or if you want to be a bit more helpful to your target user then you could use a code highlighter such as Code Highlighter
Hope this helps!