I have an inline-block div.
.element {
display: inline-block;
}
I use jquery to repeatedly append it to the DOM.
var element = $("<div class='element'>");
$(body).append(element).append(element).append(element).append(element);
However the appended divs do not wrap. It is as if I had the following mark-up (no newlines)
<div class="element"></div><div class="element"></div><div class="element"></div><div class="element"></div>
Appending whitespace inbetween the elements does not fix problem:
$(body).append(element).append(" ");
How can I force these elements to wrap? (I do not want to use floats).
If they are simply div elements set to inline-block they should wrap like so: http://jsfiddle.net/72cYy/
Check and be sure their container/parent element does not have a white-space:nowrap. That would cause them to not wrap.
You can give the elements width in terms of percentage. Change the percentage value with regard to the number of elements and how you want to wrap it.
I would recommend styling the element class with css to create the whitespace. If you don't want to do this you can always try to append a non-breaking space.
var element = $("<div class='element' /> ");
Alternatively, if the ::before pseudo element isn't being used, you can utilize it's powers to solve this issue.
element:before { /* single : to support older browsers */
display:block;
width:100%;
}
this is a solution for inline elements
Related
I have a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:
A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
I have this done successfully.
The text to wrap normally and align with the left side of the first word.
This is where the problem is.
See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv
Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?
Adding float:left to pseudo element will do it.
Check updated demo
Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to
http://codepen.io/anon/pen/MYJNEp
Like so:
.site-title a:before {
...
float:left;
}
Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)
Is there a way to check(in CSS) if an element is breaking/new lining?
I can't know the width of the divs or the parent. I only want to know the first element after the break, so I can add special CSS to this element
Like this:
<div>
first
</div>
<div>
second
</div>
<div>
third
</div>
<div>
fourth
</div>
the css:
div {
float:left;
width:200px;
height:20px;
}
div:not(:first-child) {
padding-left:10px;
}
here i need a check if the element is on a new line so I can remove the padding :
div:first-after-break {
padding-left:0;
}
I think in this case, you could probably do this by using padding-right to separate your elements, instead of padding-left. That way, elements are not indented when they start on a new line. If padding-right causes problems at the end of the line, you could consider using the :last-child pseudo selector (more information about :last-child), and set padding-right: 0; there.
This doesn't discard the question, though. I can think of legitimate uses of the :first-after-break pseudo you describe. For example: a fully responsive layout using floating block-level elements. In such a case, one might want to know if an element is at the left of the window.
You could use the ::first-line pseudo element to get the first line of a div. If you want to apply style rules to lines that are not the first line, you could apply those styles to the whole element and then remove it from the first line. But if you want to specifically use the padding property, you could also set text-indent on the whole element (without any pseudo elements).
No, I don't think there's a way in CSS to do what you're asking.
A DIV automatically takes up the full width of it's parent unless a width is specified since it's a BLOCK level element so if no width is specified so your second DIV would be on a new line anyway.
If I set the img's size to 100*100, the containing div will be like 100*106.
Where does that extra '6px' come from? How does this behavior fit to the standard?
#clyde; yes this is a natural behavior of image because img is an inline element so user agents leave some space for descender characters.
you can remove it with css:
img { display:block; } or img { vertical-align:bottom; }
FOR MORE CHECK THESE
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Unwanted padding-bottom of a div
I think we need more code, especially CSS styles, but essentially the cascading part of CSS can easily flow inherited sizes downwards. If your A has a style of some extra padding or margin, then your final DIV will get it, too. And A is an inline element which often adds padding in anticipation of more content; turning A's to blocks often solves these kinds of issues, so I would try that first.
this problem made me scratch my head
how to use CSS to make a DIV display only the first line of a multiline content?
How can I set a DIV height like one line, but actually holding multiple lines?
Can this be done without any javascript? I have to display the full content after click the DIV and edit the DIV by setting its attribute to contenteditable, it's best if I just use CSS selector to select non-first-line of the content and hide it.
Its easy:
.magic {
height: 1em;
overflow-y: hidden;
}
.magic:active {
height: auto;
}
Make sure that instead of :active you're using suitable selector.
Height have to be equal to line-height. Which is not always equal to 1em.
Question 1: you may be able to use the :first-line pseudo-element in your CSS.
div#mydiv {display:none}
div#mydiv :first-line {display:inline}
However, the spec does not list "display" as one of the properties which may be assigned to this pseudo-element, so this may or may not work, or may depend on the browser.
there was a related bug and it's already fixed
http://code.google.com/p/chromium/issues/detail?id=81783
Unfortunately Colin's answer above using the :first-line pseudo element doesn't work.. would have been nice as it's very elegant :)
There are some alternatives here:
Show first line of a paragraph
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 2 years ago.
What is the basic difference between the following CSS:
display:inline
and this:
display:block
Using these separately on an element, I get the same result.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
Read more about display options : http://www.quirksmode.org/css/display.html
Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
display: block - a line break before and after the element
display: inline - no line break before or after the element
Here is a comparison table:
You can view examples here.
display: block; creates a block-level element, whereas display: inline; creates an inline-level element. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flow of a document, whereas inline elements do not.
Some examples of block level elements include: div, h1, p, and hr HTML tags.
Some examples of inline level elements include: a, span, strong, em, b, and i HTML tags.
Personally, I like to think of inline elements as typographical elements. This isn't entirely or technically correct, but for the most part inline elements do behave a lot like text.
You can read a more through article on the topic here. Seeing as several other people in this thread have quoted it, it may be worth a read.
Display : block will take the whole line i.e without line break
Display :inline will take only exact space that it requires.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
You can refer example in this fiddle http://jsfiddle.net/RJXZM/1/.
block elements expand to fill their parent.
inline elements contract to be just big enough to hold their children.
display:block
takes the entire row(100%)of the screen ,it is always 100%of the screen size
display block example
display:inline-block takes up as much width as necessary ,it can be 1%-to 100% of the screen size
display inline-block example
that's why we have div and span
Div default styling is display block :it takes the entire width of the screen
span default styling is display:inline block :span does not start on a new line and only takes up as much width as necessary
Add a background-color to the element and you will nicely see the difference of inline vs. block, as explained by the other posters.
Display:block
It very much behaves the same way as 'p' tags and it takes up the entire row and there can't be any element next to it until it's floated.
Display:inline
It's just uses as much space as required and allows other elements to be aligned alongside itself.
Use these properties in case of forms and you will get a better understanding.
a block or inline-block can have a width (e.g. width: 400px) while inline element is not affected by width. inline element can span to the next line of text (example http://codepen.io/huijing/pen/PNMxXL resize your browser window to see that) while block element can't.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}
Block Elements: Elements liked div, p, headings are block level. They start from new line and occupy full width of parent element.
Inline Elements: Elements liked b, i, span, img are inline level. They never start from new line and occupy width of content.