, .
3 4 .
#columns {
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, blue 50%);
}
jsFiddle
- EDIT -
, , .
. span. , JavaScript , . .
, script .
- , , (, span , styleCols, ...).
JavaScript
function styleCols() {
var columns = document.getElementById('columns');
var words = columns.innerText.split(' ');
columns.innerText = '';
var spans = []
for (var i=0;i<words.length;i++) {
var span = document.createElement('span');
span.innerText = words[i] + ' ';
spans.push(span);
columns.appendChild(span);
}
var prev = null;
var colStart = null;
var colCount = 0;
var firsts = [];
for (var i=0;i<spans.length;i++) {
var first = false;
var oL = spans[i].offsetLeft;
console.info(spans[i].innerText, oL);
if (firsts[oL] === undefined) {
console.info('-- first');
firsts[oL] = spans[i];
first = true;
}
if ((prev === null || oL <= prev) && (colStart === null || oL > colStart)) {
console.info('-- col++', colCount + 1);
colStart = oL;
colCount++;
}
if (colCount == 3) {
firsts[oL].classList.add('first-in-col3');
return;
}
prev = oL;
}
}
styleCols();
addEventListener('resize', styleCols, false);
CSS
.first-in-col3, .first-in-col3~span {
color: red;
}
jsFiddle