Is it possible to create a drop shadow effect for inline text?
Here's a way to achieve multi-line, padded, underline behavior for text using only CSS.
This is based on the box-shadow method found elsewhere, but as of Firefox 32, the traditional box-shadow solution is no longer displayed correctly.
While reviewing the changes I made, I discovered that a new property was added: box-decoration-break, which was responsible. This property is set to "split" by default, but must be specified as "clone" to achieve the desired multiline complement effect.
See more: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class="box">
<h1>
<span>Multi-line, padded, highlighted text working in latest Firefox using box-decoration-break: clone</span>
</h1>
</div>
source to share
Not sure why this was voted on, I asked this question a couple of years ago, there is no way to do it with pure css that I know about, but there is a plugin, some one:
http://jsfiddle.net/OwenMelbz/rd8Qc/
The original question: Constantly filling text that wraps around?
/*!
* jQuery Typographic Background Plugin
* http://owenmelbourne.com
*
* Copyright 2012, Owen Melbourne || Selesti Ltd
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/GPL-2.0
*/
(function($){
$.fn.typographicbg = function(options) {
var defaults = {
padding: '5px',
};
var options = $.extend(defaults, options);
return this.each(function() {
var selector = $(this);
var padding = options.padding;
$(selector).each(function(){
// Wrapping Words in Spans for padding application
var string = $(this).text().split(' ');
var word = $(this);
$(this).text('');
$.each(string, function(){
word.append('<span>'+this+' </span>');
});
$(this).find('span').css({'padding-top': padding, 'padding-bottom': padding});
$(this).find('span:first-child').css('padding-left', padding);
$(this).find('span:last-child').css('padding-right', padding);
var startingheight = $(this).find('span').position().top;
$(this).find('span').each(function(){
var thisheight = $(this).position().top;
//Apply the padding to new lines and previous
if (thisheight > startingheight) {
$(this).attr('data-ypos','height is: '+thisheight);
startingheight = thisheight;
$(this).css('padding-left', padding);
$(this).prev().css('padding-right', padding);
}
});
});
});
};
})(jQuery);
source to share
This can be achieved with line-height
, padding
andbackground-color
p {
background: black;
color: white;
display: inline;
line-height: 2;
padding: 5px;
}
<p>This is a demonstration of how to have a multiline padded background color on any amount of text. enjoy</p>
source to share
There is another, similar way to do this, which only requires a small amount of javascript. As in the previous answer, but all styles are in CSS and not in inline elements
(Couldn't get SO code editor to work)
http://jsbin.com/mohuti/1/edit?html,css,js,output
<h1 id="heading">This is a demonstration of how to have a multiline padded background color on any amount of text. enjoy</h1>
h1 {
margin: 0 !important;
clear: both;
overflow: hidden;
padding-left: 20px;
position: relative;
}
h1:before {
content: '';
width: 20px;
left: 0;
height: 100%;
background: #333333;
position: absolute;
}
h1 span {
position: relative;
float: left;
background: #333333;
color: #ffffff;
padding: 10px 30px 10px 0;
font-size: 80px;
line-height: 1em;
letter-spacing: -2px;
}
// Pure JS
var foo = document.getElementById("heading");
foo.innerHTML = foo.innerText.replace(/\S+/g, function (word) {
return "<span>" + word + "</span>";
});
// jQuery
var words = $("h1").text().split(" ");
$("h1").empty();
$.each(words, function(i, v) {
$("h1").append($("<span>").text(v));
});
source to share