In <span> elements in HTML narrative flow, in order to expand the area on which clicks are detected (some of the spans have content of only one character), I am adding padding (offsetting it with a negative margin) in a class defined as
.expand-click-area {
display:inline-block;
padding:5px;
margin:-5px;
position:relative;
}
This works fine in terms of the clicking behavior. The problem is that Chrome 19 will sometimes line break between the span and the following comma in a case such as the following:
<span class="expand-click-area">this is span text</span>,
Any thoughts on how to prevent this? Essentially, I would like breaking behavior equivalent to that when the <span> is not there at all, or does not have display:inline-block.
This behavior does not seem to appear in IE10. See an example at http://jsfiddle.net/58XdJ/1/.
Try wrapping the entire non-breakable text into the <nobr> tag.
In case anybody faces this problem and none of the above solved solutions the problem like in my case, i found that adding this to the span will solve it.
display: contents;
Hope this helps someone ;)
Related
Here's some example HTML and CSS to show the problem:
<p>thisssssssssssss issssssssss a test</p>
<p>thisssssssssssss <span>isssssssssss another</span> test</p>
<p>thisssssssssssss <button>isssssssssss another</button> test</p>
button { display: inline; }
Try it out on this JSFiddle, by resizing the output area.
Result (in Chromium on Ubuntu):
As you can see, there is a line break before the <button> in the third example, which I am trying to avoid. The character seems as if it is being ignored (treated as a regular space). The desired result is that there is no break between "this" and "is," just like the first two examples.
I've already found Why do inline-blocks break after non-breaking space?. An answer there suggests using <nobr> or white-space: nowrap. However:
I'm setting the <button> to display: inline, so I don't even understand why the problem exists anymore since it's an inline element.
I need a pure CSS solution, without any extra HTML in the text before the button. My HTML has to look something like this:
<p>{{SOME TEXT}} <button>foo</button></p>
and I don't know whether the {{SOME TEXT}} will contain spaces or not. I can add extra HTML around the text, but the solution linked in the answer above requires adding an element within the text itself.
Why is the problem happening even when setting display: inline;, and how can I solve it without modifying the text itself?
Can you put a span before the nbsp?
<p>thisssssssssssss<span id="b"> <button>isssssssssss anotherrrrrrrrr</button></span> test</p>
#b {
white-space: nowrap;
}
http://jsfiddle.net/bggk33du/10/
So, this morning, for fun, I grabbed the file of unicode characters over at http://www.unicode.org/Public/6.2.0/ucd/NamesList.txt and wrote a little tiny PHP script that will output that to the screen. It takes a couple seconds to load the literally thousands of characters and render the HTML.
I tried to make a very simple grid, using inline-block divs with overflow hidden. But when I view the page in Chrome some of the boxes are shifted down or up from the rest on it's row. But only sometimes.
http://shawnsworld.ca/chars/fullunicode.php
The CSS code: http://shawnsworld.ca/chars/style.css
Any idea why Chrome would render the boxes so they are NOT in a straight row?
In Chrome, div.character has a default vertical-align of baseline.
Try removing height:100px; from div.character in your CSS. You'll see that all the boxes are sitting on the baseline of each row.
As Huangism says, changing the vertical-align to top fixes the issue.
Try adding vertical-align to your divs
div.characters {
vertical-align: top;
}
Something to compare:
http://www.unicodeblocks.com/block/Dingbats
Is this what you looking for? If yes I can give you some advice.
...other thing, there are lots of errors, in example:
<div class="character">
<span class="entity">&#x##;</span><br>
<span class="unicodeNumber">## </span><br>
<span class="name">07C0</span>
</div>
just skip any line starting with #
Whenever I create a div with display: inline-block; style inside an a tag, I get these weird lines at the bottom, that show up for no apparent reason at all. The problem seems to reproduce itself only when I place the div inside the a tags, instead of vice versa, but the reason I have an a tag surrounding my divs is to make buttons out of them.
It's kind of hard to explain, but I've made a fiddle to reproduce the problem so I can show it to you.
http://jsfiddle.net/bcnobel/6L92C/2/
Note the black lines between the divs.
Has anybody had this as well before?
Does anybody know a simple (yet elegant) workaround for this?
They're links, which by default have text-decoration:underline;. Set text-decoration:none; on the a tags and you'll be fine.
Updated jsFiddle.
in style use this
<a href="r#" style="text-decoration: none">
i have the following markup
<a class="block"><span class="inline">hello</span>world</a>
the <a> has a display:block ... if i give the span.inline a margin-top:3px it also pushes down the text after it. here is a jsfiddle to see this behaviour
http://jsfiddle.net/YLMeh/
could anybody give me a hint why this is happening?
All inline elements on a row share the same line-height. If you think about it it makes sense. What would happen when you have multiple lines of text otherwise? It would be completely unreadable.
In these situation the vertical-align attribute is what you have to work with. Read up on that and you should be fine.
margin-top: 3px; applied to your <span class="inline"> pushes the baseline down for the whole text.
understanding the vertical-align css property may help: https://developer.mozilla.org/en-US/docs/CSS/vertical-align
I have a superscript that is messing up the line spacing. How do i make it even?
I tried
sup{vertical-align:0; position: relative;}
but that doesn't help.
Any suggestions?
We can achieve it by ignoring the <sup></sup> tags and directly using something like
<span style="position:relative; top:0.3em;">
You may need to try altering the line height of the sup element to be smaller than the parent text.
sup{vertical-align:super; line-height:0.5em;}
http://en.wikipedia.org/wiki/Superscript has lots of examples that you can inspect. Some of them increase the line height of the parent, some do not.
If that isn't working for you, you can also try
sup{vertical-align:top;}
sup{vertical-align:top; line-height:0.5em;}
This works for me, even though I have sup defined in my stylesheet. I have a link, which also has styling applied, between the <sup> and </sup> tags, but this seems to force the intended effect of keeping the line spacing consistent.