Have this code:
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4> </div> </div>
How do I hide the text "(Fee Simple)" from displaying?
Want the Price to show but not the "Fee Simple" text
You can use a font-size trick like this:
h4.ihf-price {
font-size: 0;
}
h4.ihf-price span {
font-size: initial;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
Or use color trick if you want to maintain the same content width of h4:
h4.ihf-price {
color: #fff; /* Should be the same as background */
}
h4.ihf-price span {
color: initial;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
Hide text in the entire element. Show text only in the nested element.
.ihf-price {
font-size: 0;
}
.ihf-for-sale-price {
font-size: 16px;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
OR
.ihf-price {
visibility: hidden;
}
.ihf-for-sale-price {
visibility: visible;
}
<h4 class="ihf-price" style="margin-right:10px;">
<span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>
Related
I have written an little HTML/CSS code that display following image on Chrome
Why space-separations between (⯇ and ⯇) and between (┃ and ◆) are not there (see yellow unicode) ?
And why, when all <span> in <span class='char'> are in same line, space-separations are ALL visible (see green unicode) ?
The difference is only relative to how HTML code is written in file, nothing else ! The CSS code is totally identical (only background color was changed).
To facilitate the analyze of yellow case, I have put a third bloc with more colors.
The HTML/CSS code is following
body
{
font-family: Arial;
font-size:20px;
}
div.error span.char
{
font-size:40px;
background-color: yellow;
}
div.ok span.char
{
font-size:40px;
background-color: lightgreen;
}
div.color > span.char
{
font-size:40px;
background-color: orange;
}
div.color > span.char > span.bar
{
font-size:40px;
background-color: cyan;
}
div.color > span.char > span.triangle
{
font-size:40px;
background-color: lightgrey;
}
NO SPACE-SEPARATOR<br> between (⯇ ⯇) and between (┃◆)
<div class='error'>
<span class='char'>
<span class='bar'>┃</span>
<span class='triangle'>⯇</span>
</span>
<span class='char'>⯇</span>
<span class='char'>⯈</span>
<span class='char'>
<span class='triangle'>⯈</span>
<span class='bar'>┃</span>
</span>
<span class='char'>◆</span>
</div>
SPACE-SEPARATOR<br> between all <span class='char'>
<div class='ok'>
<span class='char'><span class='bar'>┃</span><span class='triangle'>⯇</span></span>
<span class='char'>⯇</span>
<span class='char'>⯈</span>
<span class='char'><span class='triangle'>⯈</span><span class='bar'>┃</span></span>
<span class='char'>◆</span>
</div>
NO SPACE-SEPARATOR with colors
<div class='color'>
<span class='char'>
<span class='bar'>┃</span>
<span class='triangle'>⯇</span>
</span>
<span class='char'>⯇</span>
<span class='char'>⯈</span>
<span class='char'>
<span class='triangle'>⯈</span>
<span class='bar'>┃</span>
</span>
<span class='char'>◆</span>
</div>
Google Chrome ignores all of the inner and outer element whitespace characters in the HTML except if they are inside the text. All whitespace characters in between text is displayed as a singular space character but the actual value of the character is retained. This is for both elements that have the inline or the block display styles.
Every single element except for the last element of the body element, displays a space at the end when it is selected by using triple click or drag selection. This space is different based on the display style of the elements.
A block display element results in 2 CRLF characters appended to it when the text is copied while a inline display element only ever results in 1 CRLF. The whitespace characters are maintained between copy and paste but are limited to only one character.
while Firefox ignores outer element whitespace but has interesting results with inner element whitespace characters. All whitespace characters are converted to spaces with except for the starting character with a limit of one whitespace between each non-whitespace character. Only the last whitespace is shown and selected
Inline Display
There is always a space before and after the text that is copied regardless of what the elements contains. Every whitespace character is removed.
Block Display
Whitespace characters before the text are retained as-is and the ending whitespace character is converted to a space.
So to answer your question, this is all based on how the browsers implement the display.
To fix it, you can remove all the spaces between your elements, in a way just minify your HTML.
body
{
font-family: Arial;
font-size:20px;
}
div.error span.char
{
font-size:40px;
background-color: yellow;
}
div.ok span.char
{
font-size:40px;
background-color: lightgreen;
}
div.color > span.char
{
font-size:40px;
background-color: orange;
}
div.color > span.char > span.bar
{
font-size:40px;
background-color: cyan;
}
div.color > span.char > span.triangle
{
font-size:40px;
background-color: lightgrey;
}
NO SPACE-SEPARATOR<br> between (⯇ ⯇) and between (┃◆)
<div class='error'>
<span class='char'>
<span class='bar'>┃</span>
<span class='triangle'>⯇</span>
</span><span class='char'>⯇</span><span class='char'>⯈</span><span class='char'>
<span class='triangle'>⯈</span>
<span class='bar'>┃</span>
</span>
<span class='char'>◆</span>
</div>
SPACE-SEPARATOR<br> between all <span class='char'>
<div class='ok'>
<span class='char'><span class='bar'>┃</span><span class='triangle'>⯇</span></span><span class='char'>⯇</span><span class='char'>⯈</span><span class='char'><span class='triangle'>⯈</span><span class='bar'>┃</span></span><span class='char'>◆</span>
</div>
NO SPACE-SEPARATOR with colors
<div class='color'>
<span class='char'>
<span class='bar'>┃</span>
<span class='triangle'>⯇</span>
</span><span class='char'>⯇</span><span class='char'>⯈</span><span class='char'>
<span class='triangle'>⯈</span>
<span class='bar'>┃</span>
</span>
<span class='char'>◆</span>
</div>
body
{
font-family: Arial;
font-size:20px;
}
div.error span.char
{
font-size:40px;
background-color: yellow;
}
div.ok span.char
{
font-size:40px;
background-color: lightgreen;
}
div.color > span.char
{
font-size:40px;
background-color: orange;
}
div.color > span.char > span.bar
{
font-size:40px;
background-color: cyan;
}
div.color > span.char > span.triangle
{
font-size:40px;
background-color: lightgrey;
}
NO SPACE-SEPARATOR<br> between (⯇ ⯇) and between (┃◆)
<div class='error'>
<span class='char'>
<span class='bar'>┃</span>
<span class='triangle'>⯇</span>
</span>
<span class='char'>⯇</span>
<span class='char'>⯈</span>
<span class='char'>
<span class='triangle'>⯈</span>
<span class='bar'>┃</span>
</span>
<span class='char'>◆</span>
</div>
SPACE-SEPARATOR<br> between all <span class='char'>
<div class='ok'>
<span class='char'><span class='bar'>┃</span><span class='triangle'>⯇</span></span>
<span class='char'>⯇</span>
<span class='char'>⯈</span>
<span class='char'><span class='triangle'>⯈</span><span class='bar'>┃</span></span>
<span class='char'>◆</span>
</div>
NO SPACE-SEPARATOR with colors
<div class='color'>
<span class='char'>
<span class='bar'>┃</span>
<span class='triangle'>⯇</span>
</span>
<span class='char'>⯇</span>
<span class='char'>⯈</span>
<span class='char'>
<span class='triangle'>⯈</span>
<span class='bar'>┃</span>
</span>
<span class='char'>◆</span>
</div>
<p class="entry-meta"><time class="entry-time" itemprop="datePublished" datetime="2017-06-03T02:58:22+00:00">June 3, 2017</time> by <span class="entry-author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="entry-author-name" itemprop="name">Albert</span></span> <span class="entry-comments-link">Leave a Comment</span> </p>
Above html will output
June 3, 2017 by Albert Leave a Comment
But I want to hide by Albert. The problem is I can't hide byas it's not wrapped within any html tag.
visibility can be overwritten on children elements. So we can customize just the root text node:
p.entry-meta{ visibility: hidden; }
p.entry-meta time, p.entry-meta span.entry-comments-link { visibility:visible; }
The problem is that visibility still occupies space:
p.entry-meta{ visibility: hidden; }
p.entry-meta time, p.entry-meta span.entry-comments-link { visibility:visible; }
<p class="entry-meta">
<time class="entry-time" itemprop="datePublished" datetime="2017-06-03T02:58:22+00:00">June 3, 2017</time> by <span class="entry-author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="entry-author-name" itemprop="name">Albert</span>
</span>
<span class="entry-comments-link">Leave a Comment</span> </p>
var el = document.querySelector(".entry-time").innerText;
document.querySelector(".entry-meta").innerText=el;
See
You can do this with JavaScript - select the paragraph DOM element and assign it to a variable, then remove the child nodes one at a time:
var entryMetas = document.getElementsByClassName("entry-meta");
for (var i = 0; i < entryMetas.length; i++){
entryMetas[i].removeChild(entryMetas[i].childNodes[2]);
entryMetas[i].removeChild(entryMetas[i].childNodes[1]);
}
If you're confined to CSS only, you can use Dorival's answer, but add an additional CSS rule to reduce the white space:
p.entry-meta span.entry-author-name{ display: inline-block; width: 0px; }
Use the following CSS to remove the text:
.entry-author-name { display: none; }
p { font-size:0; }
p > * {
font-size: 12px;
}
<p class="entry-meta">
<time class="entry-time" itemprop="datePublished" datetime="2017-06-03T02:58:22+00:00">June 3, 2017</time> by <span class="entry-author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="entry-author-name" itemprop="name">Albert</span>
</span>
<span class="entry-comments-link">Leave a Comment</span> </p>
<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
Working in WooCommerce I want to hide "as low as" which is contained in an outer span yet show the price which is contained within an inner span.
If someone could guide me as to how to do this.
Thanks
You can modify the font-size value to hide all text and then show the inner span text this way:
.price {
font-size: 0;
}
.price span {
font-size: 18px;
}
<span class="price">
as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
You can use visibility: hidden; on your outer <span>, and visibility: visible; on your inner <span>
.price {
visibility: hidden;
}
.woocommerce-Price-amount {
visibility: visible;
}
<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
Visibility can help you here.
.price {
visibility: hidden;
}
.price > span {
visibility: visible;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>
If removing the space taken by the hidden text is also require then the font-size:0 is an option in some browsers provided you reset the inner text back to the required size.
.price {
visibility:hidden;
font-size:0;
}
.price > span {
visibility:visible;
font-size:1rem;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>
Do the proper thing, and make your HTML reflect your intentions. If you want to be able to only style "as low as", then wrap that text in it's own <span> and hide that instead. This will be much cleaner than trying to select a text node with CSS and suffering from the CSS effecting the siblings also.
.hidden {
display: none;
}
<span class="price">
<span class="hidden">as low as</span>
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
The best solution is to change the HTML, as in 4castle's answer.
However, if for whatever reason you cannot change the HTML structure, but you can change the text content and the CSS, and also have a way to set the class on an object as needed (I used a hacky little piece of JS to toggle, but it could also be set during generation of a static page), you can use the ::before pseudoelement to display the desired text:
function handleClick(what) {
what.classList.contains('asLowAs') ? what.classList.remove('asLowAs') : what.classList.add('asLowAs');
}
.asLowAs::before {
content: "as low as ";
}
<span class="price asLowAs" onclick="handleClick(this)">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
I recently just asked a question on here. I am asking a few more (each in a separate question so I don't get flagged). I am making a website for a client, but the label is over top of the title in Firefox but in Chrome it looks like the way I want it. View the photos below.
Chrome
Firefox
Here is the CSS:
.label {
border: 1px solid #000;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
Here is the HTML:
<div class="row features">
<div class="col-lg-4 text-center">
<div class="single-fet">
<div>
<span class="icon-stack icon-4x">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-ok icon-light"></i>
</span>
</div>
<h2>Speedy Servers with <span class="label label-danger">SSDs</span>
</h2>
<p>You will get the fastest servers possible with SSD's clocked at 1gb/s transfer.</p>
</div>
</div>
<h2>Speedy Servers with <span class="label label-danger">SSDs</span>
h2
{
dislay: block;
}
h2 span
{
display: inline-block;
}
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.