I've noticed that if I have two links :
Text
Text
They are not joined in the browser, looks like there is a space between them.
But if I wrote them in one line :
TextText
there is no space. Is there a way to delete that space? Or I need to write all links (or better, all inline elements) in one line?
You can use word-spacing write like this:
a
{
display:inline;
background-color:red;
word-spacing:1em
}
body{word-spacing:-1em}
Check this http://jsfiddle.net/eAteH/2/
There other way also like font-size:0 check this Strange margin on `display:inline-block`-elements
Related
I have a div and a textarea exactly overlapped, I type in the textarea and that text is converted to spans that have varying text colors (syntax highlighting) and are then shown in the div, so it looks like you're typing in the div, but you're actually typing in the transparent textarea. At the moment I simply put a space between the spans where a space exists in the text input, but if I add more spaces in series it doesn't work (only one will show). So I tried using instead of spaces but I was surprised to find out the width of it is different from regular spaces. What is the point of then?
To the point, how can I add spaces that have the same width as regular spaces if doesn't?
And here's an example of what should be two exactly matching lines (but aren't).
<span>Hello</span> <span>World</span>
<span>Hello</span> <span>World</span>
Note: I'm using the font "FontinSmallCaps", it's possible that's the reason for the discrepancy, but I am not willing to do away with it. Would rather filter the user input to never have two consecutive spaces. Although that would be a last resort.
If anything is unclear or needs elaboration, let me know.
Thanks in advance!
Not exactly sure of your HTML structure, but whatever wraps the HTML you have shown could have white-space: pre set, then the spaces will all remain. No need to convert them.
<div style="white-space:pre"><span style="white-space: pre;">Hello</span> <span>World</span></div>
is Non-breaking space and the other is considered as normal string by browser. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word. are also non-collapsing, that's probably the most significant aspect of their use (at least, that's how I tend to use them, pad stuff out, quick and easy)
So, some smartass is putting Zalgo Text in their username. I don't actually want to restrict users from having accents in their names, but text above/below their name can be difficult to read. (note that this example actually renders pretty well here on the finished SO page, but in the editor it's another matter!)
Tͤ̔ͧ̇̍ͣh̥̼ͧͤͭͫ̇͋̿͟i̧̹̥̳̲͎ͨ̿̐̚s̰͕̫̥ ̳͚̳̟̫̭̯͊ͭ̅̏̊i̢͖̭̾ͦ̓͆s̗̹ ̸̬̙̯̫̓̊ͪͭͩ̿ś̰̱̥̖̈̌̆̿ī̥͔̽m̛̹̙̈́̾̊p̙̪̘̄̽̄͗ͦl͕̭̱͎̄͆ě̂͒͑̄ ̜͎̯͚̠̖̍͊̕s̱̞̺ͣ̓̓̒͜a͍ͫ͑͜m͍̙̠̻̲͍̜͒́̇̓͛̍̑p̪̩̪͙͍̥̆͗͝l͍̔̾ͨě̷̞̯̫̮̝̔̓͂̾̐̊ ͂̊̍̑ͨ͒̈́t͉̯̜̣̹̋̊̉́e̶̟̘̬ͫ̊̉̚ͅx̳̻͙̫̮̲͚ț̟͕́̌̚
This is a second example
Right now, the user name on my site is displayed in a simple <span>. I'd like to apply a style to the span that effectively crops the text it contains to prevent it from spilling outside (above/below) the element.
Note that right now, behavior is pretty inconsistent -- sometimes the symbols "bleed into" the line below the user name, and sometimes they don't. It might also vary from browser to browser. I'd prefer a simple, cross-platform solution, if possible.
You can use the overflow:hidden; property. You just need to set the display property of the span to inline-block :
DEMO
CSS :
span{
display:inline-block;
overflow:hidden;
}
I guess this problem is very simple to solve, but I don't know what to search for..
I want to have always the same space between words in multiple lines. Like invisible tables, but I want to avoid tables.
Example:
01.01.1999 Text
02.01.1999 Text gdfgf
03.01.99 Text gfghdh
How would you do this?
PS: I need a solution which applies on each row, because the data is delivered row per row through serverside scripts.
You could use the <pre> tag, unless you're looking for special formatting within each row. Description lists <dl> maybe another option in that case.
<pre>
01.01.1999 Text
02.01.1999 Text gdfgf
03.01.99 Text gfghdh
</pre>
Technically you could place a span (with the same class) around the text that you want to pad out and give the span the same width so that it pushes the other text out.
for example:
span{
width:100px;
display: block;
float:left;
}
I understand how negative indent works with CSS, but my question is, is there a way to have a kind of 'tab' in between the beginning of the negative indent and the rest of the text?
What I am trying to accomplish is the same look as in http://copyrighter.ru/canada/test.htm - please have a look at paragraphs starting from [6].
Notice that [6] is moved to the left of the line, while the rest of it looks like a neat square paragraph.
I am currently doing it with two divs.
It looks exactly the way I want it to look, but when I copy the text into MS Word, the copied text is all messed up.
I am trying to figure out if there is an easier way to accomplish the same task.
Try to put numbers into SPANs having "absolute" positions. Something like this:
http://jsfiddle.net/WvU7X/
However, I guess it won't look exactly the same after pasting the text into Word.
Instead of using DIVs, separate the elements with tags, then give them the attribute "display: inline-block;". This will allow them to have padding / margin applied to them while still appearing inline.
Note that for IE7 and thereabouts, inline-block does not work properly. Instead you have to use a combination: "display: inline; zoom: 1;". Then go about your padding and margin business.
The use of span tags will allow you to copy / paste into Word with less damage than divs.
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line