Styling Overlapping Annotations in Text with HTML <Span> Tags and CSS

avoid span float right overlap with text (CSS)

You can add a padding-left: 15px; to the .detail .item.active {} to ensure that the item will not be overlapped by text. Then I made the .detail_swatch to be positioned absolute instead of float: right; so it overlaps the padding I added.

Here is the changed css:

.detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    padding-right: 15px;
}
.detail_swatch {
    display: inline-block;
    position: absolute;
    right: 2px;
    height: 10px;
    margin: 0 4px 10px 10px;
    width: 10px;
}

Finally, a fiddle: Demo

Fiddle with very very long text: Demo

How to set text overlapping background to be white while overflowing outside to be in different color?

It's not exactly elegant, and you have to be conscious of your margins and padding to make sure the :after element lines up with the base element - but you can then use clip-path and mess with the numbers based on your exact needs to get a polygon shape. For this example I just removed the margins from everything and did a 50% circle for the clip path.

There's probably a better solution, but this should at least get you started. Unfortunately, using blending modes will be tough to get true pure colors, so clip-path with a cloned or pseudo element is a decent bet:

body {  margin: 0;}
h1 {  font-size: 72px;  font-weight: 800;  max-width: 200px;  color: #2f78e1;  position: relative;  margin: 0;}
h1:after {    content: "Lorem ipsum dolor sit";    position: absolute;    top: 0;    left: 0;    clip-path: circle(50%);    color: #fff;    height: 200px;    width: 200px;}
#box {  height: 200px;  position: absolute;  top: 0;  left: 0;  width: 200px;  background: #2f78e1;  z-index: -1;  background-blend-mode: lighten;  border-radius: 50%;  color: blue;}

<div class="container">    <svg id="box">       <circle></circle>    </svg>    <h1>Lorem ipsum dolor sit</h1></div>

li with image are placed above the text

You can use CSS Flexbox and make your <h3> includes all the text with a <span>, then make your <li> a flex container. Like:

<li>
  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3>
</li>

Have a look at the snippet below:

.icon {    list-style-type: none;}          .icon li:nth-child(1):before {content: url('http://placehold.it/50x50')' ';}.icon li:nth-child(2):before {content: url(http://placehold.it/50x50)' ';}.icon li:nth-child(3):before {content: url(http://placehold.it/50x50)' ';}
li {  display: flex;  align-items: center;  margin: 10px 0;}
li:before {  height: 50px;}
h3 {  display: inline-block;  vertical-align: middle;  margin: 0;  padding-left: 10px;}
span {  display: block;  font-weight: normal;  font-size: small;}

<ul class="icon"><li>  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3></li><li>  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3></li><li>  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3></li></ul>

Text ignores bottom padding, draws next line regardless

Setting an explicit line-height seems to work for me:

http://codepen.io/anon/pen/dNjxRW

line-height: 20px;

Are you trying to have the 10px of padding also appear above the footer?

HTML table cut off long text and show full text on hover/click

Can you add this code snippet and tell me if it's working?

tr > td:hover {    overflow: visible;    white-space: unset;}

Randomly positioned divs with no overlapping

Ammend your JavaScript to the following. This stores each box's dimensions and checks each new box against overlaps.

var boxDims = new Array();

function setRandomPos(elements,x,dx){
  elements.each(function(){
    var conflict = true;
    while (conflict) {
        fixLeft=(Math.floor(Math.random()*x)*10) + dx;
        fixTop = (Math.floor(Math.random()*40)*10) + 180;
        $(this).offset({
            left: fixLeft,
            top: fixTop
        });
        var box = {
            top: parseInt(window.getComputedStyle($(this)[0]).top),
            left: parseInt(window.getComputedStyle($(this)[0]).left),
            width: parseInt(window.getComputedStyle($(this)[0]).width),
            height: parseInt(window.getComputedStyle($(this)[0]).height)
        }
        conflict = false;
        for (var i=0;i<boxDims.length;i++) {
            if (overlap(box,boxDims[i])) {
                conflict = true;
                break;
            } else {
                conflict = false;
            }                   
        }
    }
    boxDims.push(box)
    
  });
}

function overlap(box1,box2) {
  var x1 = box1.left
  var y1 = box1.top;
  var h1 = box1.height;
  var w1 = box1.width;
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = box2.left;
  var y2 = box2.top;
  var h2 = box2.height;
  var w2 = box2.width;
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  var buf = 24;

  if (b1 + buf < y2 || y1 > b2 + buf || r1 + buf < x2 || x1 > r2 + buf) return false;
  return true;
}

setRandomPos($(".boxes"),40,40);