I need to remove the after the value of given spans.
The HTML looks like this:
<span class="number">0.15 </span>
The
is coming from the server (CMS).
Is there any way to remove the by using CSS rules?
If this value is provided by your CMS, it's posible you can modify the value with php via str_replace(' ', '', $yourVar) before echo it in your span.
If you can't access with this, you can also use jQuery to do this... Just like Muhammad Ali said:
var str = $('.number').html();
str = str.replace(' ', '');
$('.number').html(str);
Something like this could work. But with CSS, isn't posible I guess.
You can't do this with only css. Somehow you have to use jquery for this. With Regular Expression you can simply do this.
var span = $('span').html();
span = span.replace(/ /g, '');
$('span').html(span);
DEMO
Note: is coming from CMS them you have to use jquery code to replace it when your document loaded fully.
$(document).ready(function(){
var span = $('span').html();
span = span.replace(/ /g, '');
$('span').html(span);
});
You cannot possibly remove characters from document content with CSS. That’s not what CSS is for. You can add characters to be rendered, with generated content, but not remove.
However, you might be able to undo the effects of a character on rendering. Consider the following example:
<span class="number">0.15 </span>foo
The no-break space ( ) has two effects: it causes visible spacing, the same as a normal space character, and it prevents line break between “0.15” and “foo” when the browser formats the text. To prevent the latter effect, you could add a normal space using generated content, but then there will be too much spacing when a line break does not appear. To fix this, set the width of the pseudo-element to zero:
.number:after { content: " "; display: inline-block; width: 0; }
To remove the spacing effect of the no-break space, you can set a negative right margin. The main problem with this is that the width of a no-break space (and a space) depends on the font. It is on the average about one fourth of an em, but it may vary considerably. If you can regard the font as fixed (e.g., you are using #font-face), you can use the following code, with just the numeric value tuned as needed:
.number { display: inline-block; margin-right: -0.25em; }
As a side effect, this may also allow a line break between “0.15” and “foo”, since browsers may handle inline blocks in formatting so that they always allow line breaks before and after.
you can use javascript/Jquery framework to remove any charackey like this exampe Here
var span = $('span').html();
span = span.replace(' ','');
$('span').html(span);
Although you can not remove completely using CSS, the CSS rules below can enforce the behavior of a normal space.
overflow-wrap: break-word;
word-break: break-word;
Related
Let's say that I have a span and I set an image as the background of the span like this:
<span style="background:url("my_image.png") no-repeat;"></span>
As you can see above, my span is empty. If I put some content in my span like:
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
But is there another way I can do this without adding some padding to my span and keep my span empty?
Thank you
You get the same effect by using inline-block but setting width and height instead of using padding.
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.
just don't make it empty: put a 'blank' inside. There are three ways, to do that:
simple space and add style white-space: pre; to it
Non-breaking Space or
The non plus ultra is, to let css do the trick for you:
add this style to your span:
:before {
content: "\200D";
display:inline;
}
What happens:
you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore
By default spans are inline page elements (rather than 'block' elements). This means they won't take up any more space in the page than that assigned to them—for example, if you place text in them (as you have found). To achieve what you want, you need a little CSS to define a height and width for the span, but you also need to make it a block element so that it is rendered consistently.
Alternatively, you could switch to something like a div, which is already a block element. Note however that defining a block element means it will take up space in your page. If you want something more dynamic consider some on-the-fly manipulation of the element with Javascript or similar.
(Either way, ignore the advice elsewhere on this page about single and double quotes in HTML attributes: that is utter nonsense).
try
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
You have to specify a width and height to show the background. When you're typing something in it you force both with the text.
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
You should set a width and height.
In the following SO-Question is a tip, how to get the size of the background-image: How do I get background-image size in jQuery
Please look at this fiddle: Here
What I am looking for is a way to remove that extra space at top (the one between black circular 1 and top edge of pre tag) in first example and make it look like second one
The first example has some extra space above it (except the margin from strong elements), and I know that its because of the extra new-line after <pre><code> I didn't wanted to remove that extra newline as removing it makes the code look really unreadable, so I added this
pre > code > strong:first-of-type { margin-top: 10px; }
I thought it'll work but I forgot that I might have multiple strong tags in first line. Now I don't know what to do. Is there a work-around for my problem ?
Try the following adjustment to your CSS:
pre > code {
white-space: pre;
margin-top: -1.00em;
display: block;
}
You can also leave out:
pre > code > strong:first-of-type { margin-top: 10px; } /** not needed **/
Fiddle: http://jsfiddle.net/audetwebdesign/WscKu/2/
Tested in Firefox on Windows 7, should work fine, basic CSS 2.1, nothing exotic.
How This Works
For visual formatting of your HTML source code, you have a line-feed after <pre><code>,
which creates a single character line in your rendered content, which will be 1.00em tall.
You can compensate by setting the top margin to the <code> block to -1.00em. However, for top/bottom margins to work, you need to set display: block to the <code> element.
I bumped in to same issue and spent over an hour to find solution. I agree with #Fico's answer and wanted to support it by additional information.
Instead of doing this:
<pre><code>
My code snippet
Another line
</code></pre>
You want to do this:
<pre><code> My code snippet
Another line
</code></pre>
Note that you need to use same spaces for indentation on first line.
I looked at several other "standard webistes". For example, StackOverflow does this for code snippets inside <pre><code>. The official demo examples of highlight.js library also uses the same convention. This feels bit ugly in HTML source, but The rule of thumb seems to be that your content inside <code> should start at the same line as <code> element.
Also there is a problem with solution that #Marc Audet proposed. If you use negative top margin, it will overwrite on the border if you have one (or if you put it in future).
There is probably workaround if you are willing to use little bit of JavaScript. You can basically trim all contents inside <pre><code> simply by using this:
<script>
$( document ).ready(function() {
$(document.body).find("pre code").each(function() {
$(this).html($.trim($(this).html()));
});
});
</script>
You can see fiddle here: http://jsbin.com/bayawazi/2/edit
The advantage of JavaScript approach is that you have much more freedome to put <code> element. Also most code snippets its probably good idea to remove extra lines.
You should not change any style.
The problem arises becouse you are working inside a pre tag.
Changing styles to fix this will be a hack looking to fix a markup structure
Inside pre tags space management by engine browsers is quite particular.
Modify your pre content as follows and everything will look fine
Your code
<pre><code>
<strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
<strong><b>3</b>property: value;</strong>
}
</code></pre>
Modification (the second line should continue the first one...)
<pre><code><strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
<strong><b>3</b>property: value;</strong>
}
</code></pre>
fiddle here
I have crafted a webpage. It has many words enclosed in spans and h3 tags. Now I am trying to put some symbols at the end of text on the same line using CSS class. I can do this with class something like below using background-image property:
.newtohtml5{
width:fit-content;
background-image:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
background-repeat:no-repeat;
background-size:2%;
background-position-x:right;
}
However the problem with this class is that the HTML5 symbol appears at the end of the line leaving huge space between the text and symbol itself. I want that symbol appear exactly after the text in the span on the same line, not at the end of the line having huge space between the text and the symbol.
I will not like to make any changes to HTML. Though any solution is appreciated. But CSS only trick will be great.
Assuming you don't require full cross-browser support, and are okay using only those browsers that implement CSS3 generated content and you want that generated content to appear immediately after the text contained within the span, you can use the ::after pseudo-element:
<span class="newtohtml5">text here</span> <br/>
With the CSS:
.newtohtml5::after {
content: ' (generated content).'
}
JS Fiddle demo.
It's worth noting that this generated content is after the content of the span, but still within, and a part of, the span itself.
You can also use attributes of the element to include in the generated content, for example, with the following CSS you can include the string contained within the class attribute:
.newtohtml5::after {
content: ' (.' attr(class) ').';
}
JS Fiddle demo.
You can also insert images into the content property:
.newtohtml5::after {
content: url(http://lorempixel.com/25/25);
margin-left: 1em;
}
JS Fiddle demo.
I want the normal line-height, plus 4px. I have tried
line-height: normal + 4px;
but that doesn't work.
(Note: I don't want approximations using percentages.)
Why not just take aways Chromes little focus glare?
use the css property outline: none;
http://jsfiddle.net/XF6fS/
You can't do any arithmetic in CSS. Libraries like LESSCSS allow you to do certain things, but you can't get properties of rendered elements.
You could use percentages to get an approximation, however you should probably set an explicit line-height for the elements; this will be the same accross browsers.
Running this JSFiddle shows the following results:
FireFox 6: 20px
IE 8: normal
Chrome 13: normal
Set an explicit height; it's going to be much better compatible with all browsers.
There is no direct way to do it. As said, you cannot do any calculations in CSS files. That's why we keep saying that CSS is not complete, we have to make floats to display our pages properly, which is nonsense when you think about it.
As you have created the css, you can add 4pt yourself. If you don't want to hard-code, you can use CSS frameworks or other languages that create CSS output. Frameworks are fine, but I do not recommend using other languages that create CSS output for you. This is fun, but you will not learn the language and since CSS is a hard-to-understand language, you will stuck if you have any errors, misplacements on your page.
So, about your question, you can use javascript to getComputedStyle and add 4pt and set the style of the element.
This is the javascript that gets the style:
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
Usage:
var height = parseInt(getStyle("elementId", "line-height"));
var earlycss = document.getElementById("elementId").style.cssText
document.getElementById("elementId").style.cssText = earlycss + "\nline-height: " + (height + 4) + "px;";
try -
line-height: -moz-calc(normal + 4px);
But ya this wouldn't be an ideal solution due to cross browser issues and well older browsers won't ideally support this. :). And for further reference - http://www.w3.org/TR/css3-values/#functional-notation
im quite sure you can't do math like that with css
try using some javascript to get the line-height and then add 4
You can try using line height in percentage. Eg: Line-height:110% if you want to do it purely in CSS
You could try using em's to define your line height, and then assuming you know the size of your font you can ensure that it's +'x'%
The problem is of course that 90% of the time you can't know the size of your font (or rather that someone won't fiddle with it).
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.