ol:before {
counter-increment: section;
content: "Article " counter(section) ". ";
}
How do i add a class to content:?
if thats not possible a style will also do
Since you're inserting content, i want them to hide. If i remove the whole line it will not count
Currently it shows up like this:
Article 1: Terms of Condition
Article 1:
1.1 lorem ipsum
1.2 lorem ipsum
1.3 lorem ipsum
The 2nd "Article 1" should hide
Add a class to the ol element instead:
<ol class="... before-class">
Then style the :before pseudo-element using that:
ol.before-class:before {
display: none;
}
Related
I am storing content in the database, for example:
Hello
This
is
Text
and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this:
Hello This is Text
How can I fix this problem?
Set a style on the div: white-space: pre or white-space: pre-wrap
Example: http://jsfiddle.net/fPv6S/
To add some info on #Explosion Pills correct answer and extract some info from MDN:
The CSS white-space attribute is there to help:
pre:
white-space: pre
Sequences of white space are preserved. Lines are only broken at
newline characters in the source and at <br> elements.
This might result in unwanted horizontal scrollbars as shown in the example!
pre-wrap:
white-space: pre-wrap
Sequences of white space are preserved. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
As #ceremcem pointed out the line breaks at the end of the box will not be transferred when the text is copy-pasted, which makes sense since these line breaks are not part of the text formatting but rather of the visual appearence.
pre-line:
white-space: pre-line
Sequences of white space are collapsed. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
div{
border: 1px solid #000;
width:200px;
}
.pre {
white-space: pre;
}
.pre-wrap{
white-space: pre-wrap;
}
.pre-line{
white-space: pre-line;
}
.inline-block{
display:inline-block
}
<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-line
</h2>
<div class="pre-line" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
EDIT 08/14/2018:
In Chrome you might experience troubles: Pressing Enter will generate a new <div> inside your contenteditable. To prevent that you can either press Shift+Enter or set display: inline to the contenteditable <div> as seen in the fiddle.
Try this......
var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");
That will do it...
You could search and replace newlines with <br />.
http://jsfiddle.net/fPv6S/1/
I have the following code :
<h3 class="hideIfDivEmpty">title</h3>
<div id="divId"></div>
I would like to hide the h3 element when the div is empty.
I'm willing to change the html structure but the h3 has to be outside of the div because its content is dynamically changed.
Is there a way to do that in CSS ?
There is no syntax to select a parent element or any other non-child element from #divid. You can select #divid if it's empty, by #divid:empty, but there is no way you can select .hideIfDivIsEmpty in any browser by selecting that. According to this question there is such a thing in CSS4 (specs), but it is not supported in any browser as of now and according to the same specs, the selector is too slow to be implemented in browsers.
See the other answers for the javascript solution to this problem.
well wait you are going to get some very good answers here. but my solution would be make a css class then assign it to both the h3 and div tags then using jquery selectors get both of them using the css class. Now you will get an arry of tags if the the element at index 1's innertext = null or empty then the element at index 0 should hide. i hope this will help
I don't think that you can do it with CSS.
Use jQuery instead:
var divs = $(".hideIfDivEmpty");
divs.each(function () {
var div = $(this);
if (div.next().html() === "") {
div.hide();
}
});
JSFIDDLE
And like #Prinzhorn correctly said: there is a liner solution:
$('h3.hideIfDivEmpty + div:empty').prev().hide();
JSFIDDLE
Add your label using the ::before css selector.
Hide your label for empty/null values using the :empty selector
(Both require IE9+)
HTML
<div class="label l_colour"></div>
<div class="label l_size"></div>
<div class="label l_shape"></div>
CSS
/* HIDE IF EMPTY*/
.label:empty { display: none; }
/* LABEL STYLES */
.label::before { font-weight:bold; }
/* LABEL VALUES */
.l_colour::before { content:"Colour: "; }
.l_size::before { content: "Size: "; }
.l_shape::before { content: "Shape: "; }
This problem can only be solved client-side with JavaScript (or one of its libraries). With plain JavaScript, I'd suggest:
function hideIfNextEmpty(el) {
var text = 'textContent' in document ? 'textContent' : 'innerText';
if (el.nextElementSibling[text].replace(/\s/g,'').length === 0) {
el.style.display = 'none';
}
}
hideIfNextEmpty(document.querySelector('h3.hideIfDivEmpty'));
JS Fiddle demo.
A CSS-only version would not have very good browser support. It would involve putting the header tag after the content, followed by manipulating the positioning of the elements.
Here's a very hacked together CSS-only solution. IE 9+. You should do this using JavaScript instead as others have suggested.
http://jsfiddle.net/znLMe/
CSS
article p:empty + header {
display: none;
}
article p:empty {
margin: 0;
}
article p {
float:left;
}
article header {
position: absolute;
top: 0;
}
article header h1 {
margin: 0;
}
article > p:first-of-type:not(:empty) {
padding-top: 1em;
}
article {
position: relative;
}
/* include clearfix */
HTML
<article class="clearfix">
<p></p>
<header><h1>Hidden article</h1></header>
</article>
<article class="clearfix">
<p>Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
<header><h1>Porta Malesuada</h1></header>
</article>
How is the content of the <div> entered? Because a non-JS solution would simply involve entering classes (e.g. "is-hidden"). If you're manually entering content in the HTML, then you can add the classes yourself. If you're loading content dynamically through a template, then you should be able to write some simple logic that applies a class to the <h3> element based on the content to be entered into the <div>.
I'm willing to change the html structure...
The answer is YES with this structure flexibility. Have the DIV precede the H3 element and add the following CSS rule:
// testing purposes only | see css and new html structure
document.querySelector('button').addEventListener('click', function() {
var el = document.querySelector('#divId');
if(el.textContent.length > 0) {
el.textContent = "";
} else {
el.textContent = "Hello world!";
}
});
div#divId:empty + h3.hideIfDivEmpty {
display: none;
}
<div id="divId">Hello world!</div>
<h3 class="hideIfDivEmpty">title</h3>
<!-- Button adds and removes text within div -->
<button>Toggle Text</button>
I have a div that text can be dynamically added to. Using CSS regions, I make the text flow from one div to another. However, it seems I have to know how many divs I need in advance for fit the text. I want to only create a div to flow into when the one before it overflows. I haven't been able to find an onOverflow event. Below is my working static example that I modified from the HTMLRocks example. I would like this but without having to create 3 "regions" up front. I'd prefer to only create one at first and then generate others as needed. Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#content {
-webkit-flow-into: article-flow;
display: -webkit-flex;
display: flex;
}
.region {
-webkit-flow-from: article-flow;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: solid 2px black;
}
</style>
</head>
<body>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
If you are using jQuery you can compare the scroll width with the divs width and then create more divs.
if ($('.region')[0].scrollWidth > $('.region').width()) {
//Text has over-flowed, create another div
}
There is the regionoversetchange to listen to and add more regions. For the moment, you will have to use the webkit prefix in Chrome and iOS.
The NamedFlow has a property called overset. If true, more regions are needed. If it is false, you have more - or exactly - the amount of regions required.
The NamedFlow also has a firstEmptyRegionIndex property which indicates at which index of the region chain do regions start to be empty because no content has reached them.
var flow = document.webkitGetNamedFlows()['myFlow']
flow.addEventListener('webkitregionoversetchange', function(){
flow.overset // true or false
flow.firstEmptyRegionIndex // -1 if no empty regions, other index otherwise
}
In CSS when I use
p:hover {background-color: grey;}
it changes the whole paragraph. I want it to change a single word in that paragraph when I hover on any words in it. How can I do it ?
If you don't want to wrap every word manually, you can use jQuery to do it for you like below:
var p = $('p');
var text = p.text().split(' ');
for( var i = 0, len = text.length; i < len; i=i+1 ) {
text[i] = '<mark>' + text[i] + '</mark>';
}
p.html(text.join(' '));
Then you make your CSS as below:
p mark:hover {background:yellow}
Here's the demo: http://jsfiddle.net/zL2Yw/1/
Unfortunately, there's no pure CSS solution.
Just wrap your word with an inline element, e.g.
<p>
Lorem ipsum sit dolor amet <mark>consectetur</mark> dolor ...
</p>
And change its background color when the paragraph is hovered
p:hover mark {
background-color: grey;
}
(Feel free to use a most suitable element instead of <mark>...</mark>)
Is there any CSS workaround to make the pdf/doc/ppt icon always sit at the end of text line, without using a background image? When there is not enough space for the icon image, it will sit in second line alone. I'm wondering if there is anything similar as white-space:nowrap?
<ul>
<li>
Lorem Ipsum is simaorem Ipsum. (3MB, PDF)
<img src="images/pdf.gif" />
</li>
</ul>
<ul> has a fixed width.
Images are text, or “inline content,” from the perspective of layout. Thus, you can use same techniques as for preventing line breaks in text. The nobr markup prevents line breaks and works universally in browsers, though standards-writers have frowned upon it. If needed you can use its standardized, less reliable, more verbose sister: white-space: nowrap in CSS, together with some inline markup like span.
Here the problem is that you would need “overlapping” markup: ... (3MB, <nobr>PDF)</a><img ...></nobr> (i.e., open a nobr element inside the a element but close the a before nobr). While this works, it violates HTML syntax rules, so I’d suggest that you move some text out of the a element (it probably does not need to be there):
Lorem Ipsum is simaorem Ipsum. (3MB, <nobr>PDF)
<img src="images/pdf.gif" alt=""></nobr>
or
Lorem Ipsum is simaorem Ipsum. (3MB, <span
style="white-space: nowrap">PDF) <img src="images/pdf.gif" alt=""></span>
You can add an inline child to your list item and give it a background image.
<ul>
<li><span class='bg'>Lorem Ipsum is simaorem Ipsum. (3MB, PDF)</span></li>
</ul>
...
li .bg {
background-image: url(...);
background-repeat: no-repeat;
background-position: 100% 100%;
padding-right: 24px
}
See a demo here: http://tinkerbin.com/qbwNWFBb
ul li a:after {
content: url('http://placekitten.com/16/16');
}