I noticed this issue caused by localisation typo - there was a space left in the end of the translation, which caused an unexpected effect. I've reproduced it in the following fiddle:
<style>
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
background-color: #d9534f;
text-transform: uppercase;
}
</style>
<div>
<p>Label with last character space</p>
<span class="label">Label </span>
<span>some text</span>
</div>
<div>
<p>Label without space</p>
<span class="label">Label</span>
<span>some text</span>
</div>
The label class is taken from the twitter bootstrap version 3.1.1.
Could you please help me to understand why span with a last character space sticks to the next one, but when space removed from inside span it is back to normal?
In HTML more white-space characters (\t, \n, , etc.) are replaced by a space (exactly one space). In the first code this space is inside span and there is no reason to render another one space after span.
In the second case, space is rendered correctly after span, because is the first.
Notice that the width of the label is increased when you have introduced the blank space for last character.
Yes, I see weird space, but I have added inline-block to the label. Now you don't see that weird space .
.label {
display: inline-block;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
background-color: #d9534f;
text-transform: uppercase;
}
http://jsfiddle.net/c8w6ex37/3/
Related
I have a list of tags that need to be displayed next to each other, and moving to the next line if flowing out of the box.
These tags have spaces ('test completed', 'test ongoing',...), and I want to keep the whole tag text on one line (no break in the middle of a tag).
I tried to display the tags as a span with white-space: nowrap; but then it flows out of the box!
So basically I need the white-space: nowrap within the tag, but a normal break around the tags.
Is that possible?
Without seeing the code, I would try putting a parent container around your tags so you can display everything inline-block and make sure the width of the elements are great enough:
.parent span{
display: inline-block;
white-space: nowrap;
width: auto;
}
<div class="parent">
<span>test completed</span>
<span>test ongoing</span>
<span>another test</span>
</div>
Not sure if I understand you correctly but it should works, maybe had overloaded another css rules, have a look:
div {
width: 360px;
background: #f00;
margin: 10px;
line-height: 1.6em;
white-space: initial;
}
.tag {
background: #000;
color: #fff;
margin: 0 2px;
padding: 0 3px;
border: solid 2px green;
white-space: nowrap;
line-height: 1.2em;
height: 1.2em
}
<div>
<span class="tag">adx cvxc bbgdfg </span>
<span class="tag">adadxcz cvxc bbgdfg </span>
<span class="tag">adadxcz cvxc bbgdfg </span>
<span class="tag">adadxcz cvxc bbgdfg </span>
</div>
i have this behavior:
Why the text have that space?
My goal is to left align the text with that one below.
Here what i have done:
CSS
.btn-basic {
font-size: 5.8em;
white-space: nowrap;
border: medium none;
}
.btn-basic p {
font-size: 0.3em;
line-height: 1.0em;
white-space: nowrap;
}
HTML
<div class="btn-basic">
FREE WI-FI
<p>Gratis. Senza limiti. Anche in streaming.</p>
</div>
Because character glyphs have space around them so they don't butt up against other character.
See:
span {
font-size: 144px;
color: white;
background: #000;
font-family: sans-serif;
}
<span>F</span>
<span>G</span>
<span>FG</span>
That 'space' may be different for each glyph (and font family). Combine that with the font-sizing you are using and you get the effect you are currently experiencing.
Unfortunately, there is very little you can do about it.
between these two p elements.
I checked the box model and there is no margin set.
Here it the fiddle and code -
https://jsfiddle.net/f3m2apgy/
<body>
<style>
#container{
display: inline-block;
width: 500px;
border: solid 1px;
text-align: center;
}
#si_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#su_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#hold_button{
display: inline-block;
border: solid 1px;
text-align: center;
margin: 0 auto;
padding: 0px;
}
</style>
<div id="container">
<divi id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p>
<p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
</body>
You have newline after the first </p> and indenting spaces before the second <p>.
If you put <p> elements in a line, the space will disappear.
<div id="container">
<div id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
And, <divi> should be typo of <div>.
If you put the <p> elements on a single line in your code, the gap is eliminated.
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
DEMO: https://jsfiddle.net/f3m2apgy/6/
It's because all inline-block elements have a space to the left if seperated by spaces in the HTML code. To fix it, you should change them to <ul> or <div> elements, or add a negative margin to one of them.
Adding margin-left: -5px; to #su_but would also fix this, although it is a little hacky.
The usual way to fix the whitespace problems coming up with display: inline-block; is to set the parent element's font-size to zero. Of course the consequence is that you will have to re-set the necessary font-size on the child elements - which you already do in your example, so
#hold_button { font-size: 0; }
fixes your problem already.
https://jsfiddle.net/f3m2apgy/7/
I have this following html codes.
<div class="box extend">
<h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
<figure><img src="myimg.png" /></figure>
<p>
<strong>Hosted Exchange Server</strong>
<strong>Cloud Server Solutions</strong>
<strong>Backup Servicesd Server Solution</strong>
</p>
</div>
and the css of the above html (updated css)
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
}
now the problem is the strong element has spaces between each other as supposedly it should not (base on my css set up), please refer to the image below
Is there anyway I could get raid or remove that space gap between each others element? Any recommendations, suggestions and ideas, I would love to hear! thank you in advance.
It seems making them display block kills the thin line
http://jsfiddle.net/5qqLR/2/
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
display: block;
}
After further research setting the parent line-height to 1 will solve this issue
http://jsfiddle.net/5qqLR/3/
.box p {
line-height: 1;
}
Take a look at here http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element
Add to strong HTML tag:
white-space: break-spaces;
In above attachment, there is problem with last span(last word- "for"); it is actually going out of my gray region(this is actually div tag with class textframe).
I am really not getting the problem. The html code is also shown below. The borders for the <span> are shown because I just want to ask that, there is some gap present between two <span>, is it the reason which causing the last word problem? Then how to reduce this gap?
<div style="left:0pt; top:0pt; width:612pt; height:792pt; position:absolute;" class="page">
<div style="left:103.2pt; top:189pt; width:396pt; height:156pt; position:absolute; background-color:rgb(191,191,191); overflow:hidden; border:0px Solid rgb(0,0,0);" class="textFrame">
<p style="text-align: justify; padding-top: 0pt; padding-bottom: 0pt;">
<span class="ln" style="height: 14.4pt; width: 396pt;">
<span style="font-size: 12pt; font-family: F0; word-spacing: 45.9943pt; width: 197.802pt; letter-spacing: 0em; text-align: left; color: rgb(0, 0, 0); border: 0.1px solid red; display: inline-block;">Subject to the</span>
<span style="font-size: 24pt; font-family: F0; width: 64.9904pt; letter-spacing: 0em; text-align: left; color: rgb(0, 0, 0); border: 0.1px solid green; display: inline-block;">license</span>
<span style="font-size: 12pt; font-family: F0; word-spacing: 45.9943pt; width: 133.208pt; letter-spacing: 0em; text-align: right; color: rgb(0, 0, 0); border: 0.1px solid gold; display: inline-block;">terms for</span>
</span>
</p>
</div>
</div>
You have white-space: nowrap; set for span.ln this will stop it from wrapping when the content gets to the end of its parent element. It would stick out of the parent unless the parent has overflow: hidden; set, in which case the text would be obscured. Remove the white-space: nowrap; rule to allow the spans to wrap. You may also get weird layout issues as the inner spans are display: inline-block; which means they appear as a block element within some inline content, you may want to remove this too.
Unless the spans are actually next to each other in the source any white space will be rendered as a space between them whilst they are either display: inline; which is the default display for span elements or display: inline-block; as the inner spans are set up in this example (the style is visible in the style attribute of the element). To get rid of the space between elements with display: inline-block; set you need to remove the white-space (spaces, tabs and new lines) between the spans in the source.
Personally the thing that worked for me ,
I gave the parent element a "word-wrap: break-word" and the specified the width for the child span element.