How can I break a line in a span once the width of the span is reached? I tried max-width, but this did not work, the span is always as long as the text.
Ideas?
Thanks!
By default, <span> elements are 'inline', and will always grow to the size of their content. You need to explicitly declare the <span> to be display: block; or display: inline-block;.
span {
display:block;
width:150px;
word-wrap:break-word;
}
span is an inline element, meaning, it is wrapped around text (or other inline elements). It is not subject to width or height.
You want a block element, like a div, or maybe an inline-block element (achieved by setting display: inline-block on an element).
Related
See this example:
http://codepen.io/tomsoderlund/pen/JYJpPR
Try dragging the slider, which affects the font-size on the canvas element. But why does the line-height on the green boxes change? The line height is set in pixels.
The <span>s are inline elements. Those are not affected by line-height as you wish.
replace the <span>s with <div>s or set CSS to display: block
On block level elements, the line-height property specifies the
minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that
is used to calculate line box height. On replaced inline elements such
as buttons or other input element, line-height has no effect.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Use .box span as block element
.box span {
font-size: 12px;
line-height: 10px;
display: block;
}
I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
......(more than 100 other div, with unknown width)
</div>
NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks ...
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
Just tell the text inside the div not to wrap.
div {
white-space: nowrap;
}
a few years passed but ... I think it would be better to set overflow to hidden, because we don't need to show all of children elements at once. we use this kind of styling in thumb-slide like components. so I suggest to set "overflow:hidden" to parent element.
/* for parent element */
overflow: hidden;
How can i make the "Megan fox" ul li under the input field
http://jsfiddle.net/Ne8zy/3/
you can remove the absolute position of .suggestionsBox_tags and then add margin:0 auto; to center the div.
Example: http://jsfiddle.net/Ne8zy/8/
First off what's making this complicated is the text-align:center and margin:auto property in your body selector.
To fix your problem you can:
1) Set the width of your li and/or ul elements to be the same width as your textbox
or
2) Remove text-align:center and margin:auto from the body and set these only where you need them
You can use margin: 0 auto; to center the element.
Don't use text-align: center on any element that contains block elements, Internet Explorer doesn't handle that correctly.
Set both margin and padding on body, different browsers have different default values for those.
I removed the absolute positioning on the element containing the list, and centered it. And some other cleanup.
http://jsfiddle.net/Ne8zy/7/
I am trying to increase the width of #Item, but it increases only with text width.
HTML
<div><span class="Item">Brand Strategy:</span><span class="Summary">Strategy</span></div>
CSS
.Item{background-color:#000; height:40px; color:#FFF; text-align:center; width:200px;}
How do I get the specified width for #Item.
Thanks
Jean
I wrote part of this in comments above, but rewriting here for further clarification.
<span> is an inline element. Inline elements can't have a fixed width; their width is determined by the width of the text they contain, plus the margins and paddings.
See CSS fixed width in a span
You can change this behavior by turning your span into a block-level element. This is done by setting display: block or display: inline-block. But this also introduces other behavior, such as floating and taking up a whole line instead of staying inside the paragraph. This, again, can be countered by float: left and similar options. Weigh the different options and decide based on your needs.
In your specific code example, you might benefit from using <dt> and <dd> tags instead. They were built for exactly that purpose.
The span is inline element, you can not apply width or height to it unless you make it block-level element like this:
span.Item{
display:block;
background-color:#000;
height:40px;
color:#FFF;
text-align:center;
width:200px;
}
Or you can set the display to inline-block to support old dumb IE versions.
More Info:
Block-Level vs. Inline Elements
Alternatively, you can use a div to apply the width if you want.
You can use display: inline-block , if you use display: block you will have to float: left as well.
The span is an inline element, so the only way to change its width is to make it a block element or setting its display to inline-block. After doing this, you should float it to the left.
I hope this was of help.
The <span> element in an inline element. Therefore, you cannot apply width or height.
I am replacing most inline images on my sites with a sprite.
The sprite class would contain some basic css:
.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}
I saw that nesting div inside of an anchor tag is not a good idea.
<a><div class="sprite"></div></a>
I've tried to add sprites to span elements instead.
<a><span class="sprite"></span></a>
But the span elements do not expand to the width and height that I set.
It would be really useful to be able to use span elements to replace image tags with a sprite.
I could add a blank gif image into the span element to expand it. But that would defeat the reason why I want to use sprites (to reduce the number of http requests).
Using div elements inside an anchor tag is not correct.
So how can I use sprites inside an anchor element?
And there also is always the problem of aligning the div. If an image is centered in another element, how do I replace it with a sprite?
You need to declare display: block; on your span elements which are by default inline elements. Something like:
.sprite{
display: block;
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}
That should make the span elements expand to your desired width/height.
Hope this helps !
You can set the display property of the span element to inline-block
.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
display: inline-block;
}
This way the span element with the class of .sprite will accept width and height properties and will also act like inline elements.