I see this was asked and answered before, but this being slightly more complex solution, perhaps community could help me.
I have this dial with div elements that form an arc. Unfortunately, as you can see below that creates a lot of unwanted whitespace. How can I remove it?
I have never had a problem with this in the past. For one reason or another, I cannot figure out how to do the following (jsFiddle included).
Add bullets to the list (they are not showing up).
Add styling to the list, so that the bullets of the list do not over lap the border of the div container of which they are inside.
These are both very basic desires, however something is just not right with what I am producing.
Please take a look here for more details.
Thank you,
Evan
You should add a padding-left to your <ul>, as the bullet points are being chopped off.
Demo: http://jsfiddle.net/DyeUy/11/
This article is a bit dated, but still a great one to look at for help with lists: http://www.alistapart.com/articles/taminglists/
Are there any disadvantages to using word-wrap:break-word in the following way?
body
{
word-wrap: break-word;
}
The descriptions of the values for this property are as follows:
normal: Break words only at allowed break points
break-word: Allows unbreakable words to be broken
Now, this only makes a difference in the breaking of unbreakable words (i.e. continuous strings that are longer than their containers). Otherwise, it'll make no difference for 99% of text anywhere.
So, are there any disadvantages to using this globally? It can certainly solve a lot of layout issues without (at least as far as I can see) having any adverse effects. It seems better to do this once than to have to apply it everywhere you could possibly have overflowing text that would mess up your layout.
I can't think of any disadvantages since, if you want to have some other kind of word-wrap elsewhere, you'll always be able to override this global style.
That said, if you can at all narrow down the situations in which this will be necessary, using a broad class would be preferable. There's no telling what rare but very frustrating bugs a global break-word style will cause (and in what browsers).
I can't see any advantages of making it global on a page if the page is anything other than a test page.
For me I would not want words that are unbreakable to break at all. It's easier to read when they are not broken up. However if you want to make your text fit a div without using text-align:justify; and leaving gaps in between letters or words it might be nice.
The reason why I said in other than a test page was because sometimes, when I wanted to use place holder text besides "lorum ipsum" I would type gibberish but the div would always stretch. But since I wouldn't be using that text on the live site, I probably wouldn't use it.
I think the only consideration would be support in IE8.
According to this, word-wrap: break-word; doesn't work in all scenarios.
This property applies to elements that have layout. An element has
layout when it is absolutely positioned, is a block element, or is an
inline element with a specified height or width.
Of course, this seems quite easily rectified, but it should be known in case you need to support IE8 and you intend to apply this to items that do not "have layout".
Interesting are the new CSS3 properties:
http://www.w3.org/TR/css3-text/#word-break
http://www.w3.org/TR/css3-text/#word-wrap
Does anybody know of a way to use {text-overflow: ellipsis;} on a piece of text that's wrapping to a second line?
Adding:
{whitespace: nowrap;}
makes text-overflow work, but I need the text to wrap so I really can't use that.
If you know the content is going to wrap to two lines every time this solution will work. Use ::after and content: '...'; and then position it over the bottom right corner of your type (which should be a block level element). This will only work if you are working against a solid background color as you need to set the background of the ::after to match.
The only downfall is the limited parameters this can be successful in and the fact that it will cut a character in half if things don't line up right (which they probably won't).
I am fairly sure that what you are trying to do is impossible in a pure CSS solution. However there is a way of hacking together a similar result. Here is what I did:
http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication
See the fade on the block of text introducing each course? That was done by firstly restricting the overflow in the usual way and then placing another div over the top of the last line and implementing the fade in CSS. Instead of a fade you could also insert an ellipsis or some other visual clue.
So, not exactly solving it the way you want, but achieving a similar UI result to ensure the user is aware that content is truncated. Personally I think it is quite pretty :-)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I don't edit CSS very often, and almost every time I need to go and google the CSS box model to check whether padding is inside the border and margin outside, or vice versa. (Just checked again and padding is inside).
Does anyone have a good way of remembering this? A little mnemonic, a good explanation as to why the names are that way round ...
When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the inside of the walls.
pin - P is in
You are using a box. If you were putting something in a box you would put some padding inside to make sure it didn't smack against the sides. Margin would then be the other thing.
Print the diagram from the Box Dimensions section of the specification, and put it on the wall.
To me, "padding" just sounds more inner than "margin". Perhaps thinking about the printed page would help? Margins are areas on the far outside - generally, you cannot even print to the edge - they are unmarkable. Within those margins, the content could be padded to provide an extra barrier between the content and the margin?
Once you work in CSS enough, it'll become second nature to remember this.
I've just learnt it over time - the box model is fairly simple but the main reason people find it hard is because body doesn't visibly break the model.
Really, if you give body a margin and a background you should see it surrounded by a white strip. However this isn't the case - body's padding is the same as margin. This establishes a few incorrect things about the box model.
I usually think about it like this:
margin = spacing around the box;
border = the edge of the box;
padding = space inside the box.
Padding is usually used inside. Either on the interior of a wall or a delivery box, that's simple. And if padding is inside, then margin is outside. Shouldn't be too hard.
use firebug to help you see.
Tim Saunders gave some excellent advice - when I first got started with CSS, I made a point of building a good, fully commented base stylesheet. That stylesheet has changed many times and remains a terrific resource.
However, when I ran into my own box model problems, I started using 'Mo Pi'. As in, "I'm not fat enough, I need to eat mo pi." Strange, but it worked for me. Of course, I put on twenty pounds while learning CSS...;-)
Create yourself a commented base stylesheet which you can use as a template whenever you need to create a new site or edit an existing site.
You can add to it as you grow in knowledge and apply it to various different browsers to see how various things behave.
You'll also be able to add in comments or examples about other hard to remember stuff or stuff that is counter intuitive.
Add border, even just temporarily. As you play with the numbers, you'll see the difference.
In fact, temporary borders around elements is a helpful way to work, such that you can see why floats are dropping, etc.
I know this is an answer to your question, but more of a tip. Whenever I am dealing with margin and padding, I will add a border around the part you are working with, then from there, it shows me the room I have to work with. When I am all set, I remove the border.
PAdding is a PArt of an element's PAinting: it extends the element's background. It makes sense to think of a pair element+padding as sharing a common background. Padding is analogous to the painting's canvas: the bigger the padding, the bigger the canvas and therefore background. Border (the painting's frame) would go around that pair. And margin will separate paintings on the gallery wall. Thinking about the concept of object background helps glue the pair object+padding together. The usual explanations of what is inside vs outside do not stick to memory: after a while everybody gets back to the original confusion. Remember also that margins are vertically collapsible and padding is not.
Instead of ask again and again to google you just use inspector window. In that style tab and scroll down to bottom you can see like this.
Margin:When you want move the block.
Padding: When you want move the items within a block.