Is it possible to create box-shadow effect for inl

Question

I want to create this effect:

Is there a way to do this via CSS/JS?

Thanks so much I'm a newbie in web design and I've been struggling with this for the past hours!

Answer 1

Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.

This is based on the box-shadow method found elsewhere however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.

Reviewing the changes made I found the addition of a new property: box-decoration-break, that was responsible. This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.

For more info see: 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>

Answer 2

This can be achieved with line-height, padding and background-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>

Answer 3

Not sure why this is being down voted, I asked this question a couple of years ago, there is no way to do this with pure css that I am aware of but there is a plugin some one shared:

http://jsfiddle.net/OwenMelbz/rd8Qc/

Original question: Persistant padding on a text that wraps?

/*!
 * 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);

Answer 4

There is another, similar way of doing it that only requires a small amount of javascript. Similar to the answer above, but places all the styling in the CSS rather than inline elements

(Couldn't get the 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));
});