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.
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>
In my mobile theme I have been playing around with the CSS of my tables to make the information clearer and easier to understand for my users.
In column 1 I have a network logo, in column 2 I have text which I have formatted both as (display:table-cell) and given them a border of 1px.
The problem is I can't get them to vertically align exactly I have attached an image to show you exactly what I mean.
http://pasteboard.co/1vII00Yg.png
As its an image in column one when I first inserted it in there it was messed up so I did this in the CSS to try to align it to the adjacent text cells.
HTML
<td class="network-cell">
<center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>
</td>
CSS
.network-logo {
min-height: 30px;
min-width: 30px;
position: relative;
top: 5px !important;
}
.network-cell > center {
border-bottom: 1px solid gainsboro;
border-right: 1px solid gainsboro;
border-top: 1px solid gainsboro;
height: 39px;
position: relative;
top: 5px;
width: 100%;
}
The adjacent cells are formatted differently because they don't contain an image.
For example.
HTML
<td>
<p id="minutes" align="center">300</p>
</td>
CSS
#minutes, #texts, #data, #infinity {
background-color: ghostwhite;
border-color: gainsboro;
border-style: solid;
border-width: 1px;
color: black !important;
font-size: 13px;
font-weight: normal;
line-height: 3em;
padding-left: 1px;
padding-right: 1px;
width: 100%;
}
How can I make the column 1's border align exactly to the border of column 2,3 + 4?
I know I need to change these to classes also - to view the problem scroll to the bottom of the website and select view mobile version.
http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
This question is way more complex than the question you highlighted it
to be a duplicate of, the rules are different and we are talking about
aligning objects formatted as table cells not table cells themselves!
Replace all the id= with class=, as id shouldn't be duplicated. Just remove the <tbody> structure there and replace with the following:
.row {font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 10pt;}
.row > div {display: inline-block; vertical-align: middle; height: 40px; background: #f5f5f5; border: 1px solid #ccc; line-height: 40px; padding: 0 10px;}
.row .network-cell {background: #fff; padding: 0;}
.row img {display: inline-block; line-height: 1; vertical-align: middle;}
<div class="row">
<div class="network-cell">
<img class="network-logo" src="http://mobilereactor.co.uk//wp-content/themes/wootique-child/images/network-logos/three-logo.png" alt="Three" />
</div>
<div class="minutes">100</div>
<div class="infinity">unltd*</div>
<div class="data">500MB</div>
</div>
Preview
Try border-collapse: collapse on each offending element. I believe that would be <center> and <img>. border-spacing: 0 may be of use as well. Keep in mind that your metro stylesheet reset the border-collapse: separate, so either place the styles in a <style> block with !important, or use inline, or better yet, assign classes.
With minimal effort:
.network-cell > center {
...
...
top: 6px;
...
...
}
But use table for alignment isn't so good, in this case better div with display: inline-block, and the tag center is deprecated.
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/
Picture:
.left {
border: 1px solid red;
}
textarea {
border: 1px solid blue;
}
.parent {
border: 1px solid green;
}
<div class='parent'>
<span class='left'>
<span>one</span>
<span>two</span>
</span>
<textarea></textarea>
</div>
Codepen
Why is my textarea higher up than its neighbor?
It's not.
Let me explain.
First, a bit of background:
Your span and textarea elements are (by default) inline elements.
Browsers normally provide a little bit of whitespace underneath inline elements for descenders.
To understand descenders...
Look at this line of text. Notice there are no letters that breach the baseline.
Now look at the following sentence:
By just crossing the bridge he probably got away.
Note the letters "y", "j", "p" and "g". These letters breach the baseline and are known in typography as "descenders".
[
Source: Wikipedia.org
The gap you're seeing is not margin or padding, but simply the browser providing room to accommodate these lowercase letters. In short, this is called baseline alignment.
baseline
The line upon which most letters "sit" and below which descenders extend.
[
Source: Wikipedia.org
So why, somebody might ask, does the browser provide this space for textarea, img, input and other inline elements, that don't need space for descenders?
Because the browser adjusts for the possibility that you may have text before or after one of those elements on the same line.
Now, to your image and code...
On first glance it clearly appears that the textarea is higher up than the span element. But if you take a closer look...
...you'll see they are perfectly aligned. Both span and textarea are providing space for descenders.
The borders you've added contribute to the appearance of misalignment because the textarea border wraps a clearly delineated box while excluding descender space, but the span border wraps the text and the descender space. If you remove the red border the misalignment is less pronounced.
In terms of a solution, here are two options:
Add vertical-align: bottom to the textarea rule, OR
Add display: block to the textarea rule.
Adam,
If you add the following to your existing css, you should get your desired results.
.left{
display:inline-block;
vertical-align: text-bottom;
}
textarea{
margin:0px;
vertical-align: text-bottom;
}
You can see a working example at the following url: https://jsfiddle.net/YOOOEE/z8pwpms6/
If you have two span elements, the high will be the same. Spans have display:inline; by default.
<span class="left">
<span>one</span>
<span>two</span>
</span>
<span class="right">
<span>one</span>
<span>two</span>
</span>
All browsers have defaults styles for textareas:
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
resize: auto;
cursor: auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
input, textarea, keygen, select, button {
margin: 0em;
font: 13.3333px Arial;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
My solution:
.parent {
border: 1px solid green;
display: flex;
}
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/