I have a simple paragraph containing text where each letter is in a <span> so that I can put a background-color on each of them. Basically, this is needed to do text highlighting.
However, the content is scaled up using transform: scale() on the body, which makes gaps appear between each <span>.
An example : http://codepen.io/anon/pen/XbQXBw
By changing the scale back to 1 or any other Integer value, there is no more gap. How to make it go away when scale is a Float value?
Related
So my problem is I have this hover effect applied on a text which should change the font size of the text. At first I used font-size transition by enlarging the font size while being hovered. Transitioning the font-size works perfectly as it wraps the texts when it overflows the parent div. The only negative using font-size transition is, it has this annoying jitters as it grows. So I chose to use transform scale as this has a more appealing transition.In other words, I scale up the text when hovered. However, using this solution, I can't wrap the text when it overflows the parent div. Which made me to switch back to my former solution (Font size transition).
I am trying to figure how to best approach this issue
Try to add this CSS property will-change: transform; to the selector that performs the scale transformation. It will help the browser to anticipate the jitteriness problem associated with the transform animation. More info on MDN
I was trying to make an element not occupying any space but still visible. I don't want any possible layout-changing side-effects, which means the elements should look exactly the same after making it not taking up space.
Almost all methods provided by Google, or related answers in StackOverflow, use absolute positioning. The problem is setting position: absolute to an inline element actually changes its layout behavior.
Take this really simple layout for example:
A simple paragraph layout
My intention is to make the blue text <span> not occupying space. I set it to position: absolute:
After absolute positioning
We can see from the image that the second line of the <span> doesn't position from the start of the line anymore. It's lined up to the start position of the first line, which I assume, was to make sure the whole <span> remains a rectangular shape. But no matter what, the layout was modified after absolute positioning.
Some suggest wrapping a relative layout container around the <span>, but that won't work - as long as one absolute container is showing up, the layout breaks.
By the way, my intention on this was to emphasize a few words in a paragraph by inverting their color and background-color, and I had to make two perfect overlapping copies and style them separately in order to do so. I can't directly style one <span> because the background of multiple lines of text always overlap on the previous lines, cutting off the descenders of those letters when line-height is small, but that's another problem.
When I have an HTML paragraph (<p> tag) that has its max-width set, sometimes, depending on the text, the paragraph takes up more horizontal space than necessary. I would like to prevent this, i.e. make the paragraph shrink so that it only takes up the minimum horizontal space it needs for the text. The following are my design requirements:
max-width property is given
the text itself should look the same, so for example, it should not be hyphenated at line breaks
it should have a background color in its exact area, overflowing is not allowed
For example, in this fiddle, the first paragraph's width is 123px while 104px would be enough to fit its content, as shown by the second paragraph.
The following picture shows the extra space that I would like to remove, along with the desired outcome (second paragraph):
How can I achieve this?
I have not found a way to achieve this with pure CSS and HTML, but there's a way with JavaScript.
Instead of the paragraph (<p>), we need a more complex structure: a <span> inside a container <div> and the styling has to be applied to the div (the background color and the max-width). The following JavaScript code has to run to set the correct width on the div:
const container = document.getElementById('container');
const paragraphSpan = document.getElementById('paragraph-span');
container.style.width = paragraphSpan.offsetWidth + "px";
The full solution is available here.
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I got a CSS question related to this fiddle: http://jsfiddle.net/r584e/
Here the relevant screenshot
Sometimes I've got to style an inline element in a such way, trying to almost avoid space between rows and applying a background only under the text. As you can see, the first paragraph has a link inside, in which I set line-height: 1em . The paragraph on the right has instead a line-height: 0.8em;. (Note: I know in this way I could roughly cut some letters - like q,g,p,... but the text is uppercase so it's not really a problem)
In the second paragraph rows are actually closer (as I want) but unfortunately each row is also partially overlapping the previous one (unless you remove the background color applied) and this is not good (e.g. see the word «uppercase» on the bottom), so here my questions:
how can I get the rows closer (like paragraph on the right) without them overlapping each other and defining a background color (no matter the element in which it is applied but it has to stay under the text, not fill a whole block)
Optionally there is a way to add an horizontal padding to each line of text?
Feel free to change the CSS and/or markup. I'm looking for a pure CSS workaround.
An optimal solution should work on modern browser and, if possible, at least from IE8+
Thank you in advance. =)
Edit:
About 2nd question, using #thirtydot solution I can add space (to the right) using white-space: pre-wrap applied on the span element
Simply add a wrapper element inside the em, such as a span, and apply position: relative.
See: http://jsbin.com/axefaf
<a href="#"><em style="line-height: 0.8em">
<span>This is an uppercase multirow text inside a link element</span>
</em></a>
span {
position: relative;
}
This works in all modern browsers and IE8, but does not work in IE7.