I am trying to create a combobox style widget (jquery-ui compatible) andcurrently I am trying to get the static layout of the box sorted. The problem is when I have long text in the value area of the select it doesn't clip in Firefox (it actually wraps). I don't want this and tried various combinations overflow:hidden white-space:nowrap etc but in Firefox it still wraps. The sample code is below.
<a href="#" class="ui-widget ui-widget-content ui-custom-button ui-state-default ui-corner-all ui-helper-reset" style="padding-left:5px;text-decoration: none; width: 139px; ">
<span style="float:right;margin-top:1px;border-left:1px solid #D3D3D3;" class="ui-custom-button-icon ui-icon ui-icon-triangle-1-s" ></span>
<span style="line-height:1.5em;font-size:10px;margin-top:1px;overflow:hidden;height:16px;">If the text is very long then somethin</span>
</a>
Can anyone offer any help on this?
Try giving the element a display:block, or change the SPAN to a block-level element like DIV.
The problem is spans are inline elements, and you can't set width or height on inline elements.
And as overflow controls are based on block dimensions It won't work.
However, as of Firefox 3.0, there is support for
display: inline-block
Which allows you to control the element as if it were a block, but to the containing scope it still behaves like an inline element.
Related
<a> is positioned relatively, while <span> is nested inside it and is positioned absolutely. Yet, <span> appears below the bottom left corner of the image, instead of appearing at top left corner of it's relative parent. I can't understand why does it not ignore it's sibling's position.
Here is my code:
.pos-rel {
position:relative;
}
.pos-abs {
position:absolute;
top:0px;
right:0px;
}
<a href="#" class="pos-rel">
<img src="http://placehold.it/270x270" class="img-responsive">
<span class="label label-primary pos-abs">Overlay</span>
</a>
Picture of an expected behavior:
It is most likely that I don't understand how position:relative and position:absolute work together in this case. Can anyone explain why the behavior illustrated on the picture is not taking place?
This is due to how the display of <a> is expressed in terms of CSS. Usually, it's display: inline. Absolute positioning works quite differently when the position: relative ancestor is an inline element:
The containing block of an element is defined as follows:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
The inline box generated by the <a> (to contain the <img>) is the same height as the line box that it's in, and the height of the <img>, which itself is inline, is irrelevant. So the absposed element is placed at around the same height as the line box the <img> is sitting on. The <img> is positioned the way it is because it's sitting on the baseline of the <a>.
As you can imagine, setting the <a> to display: block produces the expected behavior.
<a> is inline, you must change it to block and set width or inline-block to let it assume the width of it's contents.
Included the jsfiddle to reflect what you were aiming for: https://jsfiddle.net/gq30uct4/
NEW ANSWER:
As #ISuthan Bala wrote, <a> is inline element, so you have to add your relative class to an additional DIV inside the <a> tag:
http://codepen.io/anon/pen/VaqmWN
.pos-rel {
position:relative;
}
.pos-abs {
display: block;
position:absolute;
top:0px;
left:0px;
}
<a href="#">
<div class="pos-rel">
<img src="http://placehold.it/270x270" >
<span class="label label-primary pos-abs">Overlay</span>
</div>
</a>
My display code could look like this:
<div class="displayApproved">
<span class="bold">this is my text</span>
</div>
My .displayApproved has a padding-top:8px; to align to its neighbor element, and this works fine with non-bold content.
When there's a <span 'class="bold"'> inside, is there a way to adjust the padding on the div to 9px without creating a new class "displayApprovedBold" (several content pages would need changing)? If there's an advanced CSS rule though that would adjust that div's padding if the div contained that bold span, then one change and I'm done.
With jQuery you can just do:
$('.displayApproved:has(.bold)').css('propery', 'value');
So I have several spans inside of a div as so:
<div id="parent">
<span class="child">span one</span>
<span class="child">span two</span>
<span class="child">span three</span>
<span class="child">span four</span>
<span class="child">span five</span>
</div>
parent div(#parent) is fixed width, not fluid. span.child has an auto width, with a padding of 3px on either side. I am having an issue where the span tag will overflow to the next line of #parent, even in the middle of a sentence.
For example: span.child containing "span four" is at the end of the first line in #parent, it will overflow the word "four" to the next line, with "span" being on the line above still. I have tried word-wrap to no avail.
Any ideas where I should start for this? I'm not sure if I need to apply styling to the span, or the parent div. And which property is best for this, I've only come up with word-wrap and can't get that work. Thanks!
To prevent division of an element into two lines, set white-space: nowrap on it. It seems that this, preventing normal line wrapping inside span elements, is what you are looking for, rather than preventing overflow (which would be a different matter).
If the content of some of the span elements does not fit onto a line inside the div element, even when standing there alone, then you have an overflow issue. The default is visible overflow.
inline-block is not working for me here below.. no problem with block
<div class="delegacion" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
<h2>Delegación Madrid</h2>
<span itemprop="streeAddress" class="new-line">Calle Guetaria 110</span>
<span itemprop="postalCode">28041</span>
<span itemprop="addressLocality" class="new-line">Madrid</span>
<span itemprop="telephone" class="telephone new-line">
683 457 946
</span>
CSS:
span.new-line {
display: inline-block;
}
You would generally use inline-block when you want an element to behave like an inline element but be able to respect properties such as height, width, top & bottom padding and margins.
Since you aren't setting any of those, you won't see a difference between inline and inline-block
If you are trying to have the .new-line items each be on their own line, then you have to use block instead of inline-block.
See jsFiddle here: http://jsfiddle.net/25VQa/
The short answer is that you need to use block.
A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:
<span style="width: 50%">...</span>
etc..
In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.
Thanks in advance for any help!
Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.
#element {
display: inline-block;
width: 50%;
}
inline elements cannot have dimensions. do them to do so, and still remain inline, add:
display: inline-block
Add display: flex; on parent div style.
<div style="display: flex;">
<span style="width:50%">...</span>
<span style="width:50%">...</span>
</div>