We Keep Coding

How can I stop the transparent background of multiline text overlapping between lines?

I'm facing an issue where I have an inline <span> containing multiline text, with a transparent background. Despite having a default line-height, the background on the text overlaps, causing darker, horizontal rows where the background is overlaid onto itself.
Here is a good demonstration of the problem (image + jsfiddle)
JsFiddle demonstrating this issue.
Minimal reproduction of issue
HTML:
<h1>
<span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span>
</h1>
CSS:
h1 {
text-transform: uppercase;
font-family: Arial;
line-height: 1;
font-size: 30px;
background: rgba(0,0,0,0.5);
color: #FFF;
display: inline;
}
h1 span {
position: relative;
}
Solution requirements
The background color must conform to the shape of the text; so setting the span to display:inline-block is not a workable solution.
Setting a fixed line-height (or padding) is not an optimal answer as the exact font rendering changes between browsers, and user's settings. Setting the line-height perfectly in Chrome will product an imperfect result in Firefox, for example.
The text must be dynamic and semantic. A solution cannot involve rendering an image representation of the text on the server for the client.
Preferably allows for arbitrary padding to be added or removed to reduce or increase the space between the text and the edge of the background.
Javascript could be fine. I'm using Angular 2 here, so answers which integrate nicely with that are even better.

Line height will accept a 'none' value, so you can set that and it works (if it's display:block), however (at least in chrome, safari and ff on Mac) anything inline had a 1px gap between the lines. So in the solution below I just added a padding top of 1px to the span to adjust for that gap. I'ts a little hacky, but it gets the job done. You'll want to do much more browser testing obviously. It scales fairly well with browser zoom on chrome and ff, but gets a little off at really large zoom rates on safari.
h1 {
text-transform: uppercase;
font-family: Arial;
line-height: none;
font-size: 30px;
color: #FFF;
}
h1 span {
background: rgba(0,0,0,0.5);
line-height: inherit;
display: inline;
padding-top: 1px;
}
<h1>
<span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span>
</h1>

Tablesorter StickyHeaders shifts columns over on scroll

In two separate parts of our software, (entirely different code) Sticky Headers have always done this and we've lived with it. I apply the StickyHeader widget and put these in a .wrapper container, and it works as intended: the header will follow on scroll. However, it always causes our headings to shift to the right. My .wrapper is simple:
.wrapper {
position: relative; overflow-y: auto; height: 652px;
}
th {
background-color: #003366;
color: #ffffff; font-weight: bold;
padding: 3px; text-align: center;
}
Please excuse the obfuscation, but I am not (legally) allowed to make a jsFiddle or provide any more clarity than this. Notice the second "black blob" is shifted completely off while the rec is clearly off-center.
Before Scroll
After Scroll

Here, the issue was the CSS:
* {box-sizing: border-box;}
However, when applied to the demo, I could not reproduce the error. I've tried to determine what else in conjunction would be causing the issue, but whatever I tried, it would always resolve back solely to border-box. I answer my own question with the advice: if you happen upon this rare bug affecting your sticky tables, run something like
/* give to all elements, excluding report_table */
*:not(.report_table *) {
box-sizing: border-box;
}

How to set a tooltip width dynamically?

I want to create a tool-tip that will have flexible size according to the text length. For example, I have the following tool-tip:
Now, for this text, the width is OK (fixed in the css). But, when I have a very smaller string:
the tool-tip looks too big. My question is: how do I make the tool-tip flexible according to the text length? Is there a way to do this in the .css maybe? I work with d3.js, so an answer from this point of view would be acceptable too.
Thank you in advance for your answer!
EDIT: I use this tutorial in order to accomplish my goal, my code is something like that (not exactly, but close enough). It would be best to provide an answer based on that example, since my code is too big to post here.

You can do that with CSS, just use min-width and max-width together instead of width
Also you can simply remove width from your CSS or change it into width: auto;

the css for the tooltops looks like this (according to your link)
div.tooltip {
position: absolute;
text-align: center;
width: 60px; /* Width and Height are fixed */
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
Try removing the width property of the CSS. Above you can see that this is set to a fixed-width of 60 pixels.

This may be best CSS for this. It will adjust its size according to text inside it
div.tooltip{
position: absolute;
white-space: pre-line;
pointer-events: none;
visibility: visible;
background-color:White;
text-align: left;
padding: 5px 0;
display: block;
z-index: 1;
border: 0.5px solid black;
}

Text-overflow does not work

I my page i have a panel and a table in the panel, this is my code in JSFiddle
I have a problem in my code, in td of table i have text and i set text-overflow for that but it doesn't show correctly. it shows like this :
But i want text shows like this:
How can i fix it?

You can give your paragraph a class for easier to manage:
<p class="text">...............</p>
Then you can use following css properties to achieve your task:
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
Updated Fiddle

hope it will help you, remove the text-overflow and white-space from td.
.info-table td {
overflow: hidden;
}
demo

remove the white-space: nowrap; property in your css, you will get

Actually overflow works only on single line that's why your all content shrink onto one line.
you may use some jQuery/Javascript library like this http://pvdspek.github.com/jquery.autoellipsis/ or try a pure css solution using this tuts
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

try something like this,FIDDLE
change your code
FROM THIS
.info-table td {
overflow: hidden;
text-overflow: inherit;
white-space: pre-line;
}
TO THIS
.info-table td {
overflow: hidden;
}
EDITED CODE FIDDLE
.info-table td p{
max-height:260px;
line-height: 18px;
text-align: justify;
font-size: 10px;
font-weight: normal;
}

increase the height of div. i think due to less size it showing like this

Truncating svg text to fit a rect

What i need is to truncate a text so that it fills the size of a svg rectangle and then popup to its full-size on mouse-over.
I have tried with css using the following code to hide the text and then popup but it doesnt seem to work.
#text_trunc {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#text_trunc:hover{
overflow: visible;
white-space: normal;
width: auto;
position: absolute;
background-color: rgba(0,0,0,0);
}
I have created all the svg elements using javascript and this is where i create an id for the text element
text.setAttributeNS(null, "id", "text_trunc");
My best guess is that svg creates an image which cannot be truncated by css...still need a solution. Thanks in advance

The "overflow" CSS property won't work in SVGs because <text> elements have no "box" to overflow.
You could try experimenting with the "clip-path" property instead. It is a CSS property specific to SVGs. You would need to define a clip path in your SVG that was the size of the truncated box. Then add and remove it with your CSS rules.
#text_trunc {
clip-path: url(#truncbox);
}
#text_trunc:hover{
clip-path: none;
}
Unfortunately, this solution doesn't allow for fancier behaviour like automatic ellipses.

i think the following url will help you
http://css-tricks.com/forums/discussion/12984/css-display-hidden-text-on-rollover/p1