How to add horizontal padding to every line in one multi-line wrapped sentence?
After struggling for some time I found a non-quirky solution with a decent fallback for older browsers – adding two CSS3-shadows to the lines of text:
span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
How to apply padding to every line in multi-line text?
You could use box-decoration-break
property with value of clone
.
box-decoration-break: clone;
Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The border-radius, border-image and box-shadow, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with background-repeat: no-repeat may be repeated multiple times. - MDN
See the current browser support tables at caniuse.com
jsFiddle example
h1 { font-weight: 800; font-size: 5em; line-height: 1.35em; margin-bottom: 40px; color: #fff;}h1 span { background-color: rgba(0, 0, 0, 0.5); padding: 0 20px; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>
How to include padding on a span element that has multiple lines
You can try faking the background when the span is broken by using box-shadow
. Try something like this and see if it works for you:
span { background-color: yellow; padding: 1px 0; box-shadow: 10px 0 0 0 yellow, -10px 0 0 0 yellow;}
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a nisi ipsum. Mauris convallis dapibus diam ac sollicitudin. Vivamus varius nulla magna, ac rutrum nulla accumsan quis. Duis placerat, elit non posuere elementum, tellus massa pellentesque nunc, eu maximus ligula metus non dui. Sed accumsan quam nec sodales sagittis.</span>
Add padding at the beginning and end of each line of text
I've tested this in IE8 (doesn't look too bad in IE7) and recent versions of Chrome, Firefox, Opera, Safari.
Live Demo
Screenshot from Chrome:
It got a bit silly and, to be honest, probably more complicated than it's worth - a JS based solution would definitely be easier to understand.
There are so many gotchas with this technique.
CSS:
#titleContainer {
width: 520px
}
h3 {
margin:0;
font-size: 42px;
font-weight: bold;
font-family: sans-serif
}
h3 .heading {
background-color: #000;
color: #00a3d0;
}
h3 .subhead {
background-color: #00a3d0;
color: #000;
}
div {
line-height: 1.1;
padding: 1px 0;
border-left: 30px solid #000;
display: inline-block;
}
h3 {
background-color: #000;
color: #fff;
display: inline;
margin: 0;
padding: 0
}
h3 .indent {
position: relative;
left: -15px;
}
h3 .subhead {
padding: 0 15px;
float: left;
margin: 3px 0 0 -29px;
outline: 1px solid #00a3d0;
line-height: 1.15
}
HTML:
<div id="titleContainer">
<h3><span class="indent">
<span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT'S RIGHT HERE</span>
</span></h3>
</div>
<!--[if IE]><style>
h3 .subhead {
margin-left: -14px
}
</style><![endif]-->
Wrap a text within only two lines inside div
Limiting output to two lines of text is possible with CSS, if you set the line-height
and height
of the element, and set overflow:hidden;
:
#someDiv {
line-height: 1.5em;
height: 3em; /* height is 2x line-height, so two lines will display */
overflow: hidden; /* prevents extra lines from being visible */
}
--- jsFiddle DEMO ---
Alternatively, you can use the CSS text-overflow
and white-space
properties to add ellipses, but this only appears to work for a single line.
#someDiv {
line-height: 1.5em;
height: 3em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
And a demo:
--- jsFiddle DEMO ---
Achieving both multiple lines of text and ellipses appears to be the realm of javascript.
Applying an ellipsis to multiline text
I finally found a solution to do what I want.
As p
a paragraphe and article
the wrapper.
If you want to apply ellipsis to p
depending on article
height (which also depends on window height), you need to get the height
of the article
, the line-height
of the p
and then articleHeight/lineHeight
to find the number of line-clamp
that can be added dynamically then.
The only thing is the line-height
should be declared in the css file.
Check the following code. If you change the height of the window, the line-clamp
will change. Can be great to create a plug-in aiming to do that.
jsfiddle
function lineclamp() { var lineheight = parseFloat($('p').css('line-height')); var articleheight = $('article').height(); var calc = parseInt(articleheight/lineheight); $("p").css({"-webkit-line-clamp": "" + calc + ""});}
$(document).ready(function() { lineclamp();});
$( window ).resize(function() { lineclamp();});
article { height:60%; background:red; position:absolute;}
p { margin:0; line-height:120%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>
CSS technique for a horizontal line with words in the middle
This is roughly how I'd do it: the line is created by setting a border-bottom
on the containing h2
then giving the h2
a smaller line-height
. The text is then put in a nested span
with a non-transparent background.
h2 { width: 100%; text-align: center; border-bottom: 1px solid #000; line-height: 0.1em; margin: 10px 0 20px; }
h2 span { background:#fff; padding:0 10px; }
<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>
Li item on two lines. Second line has no margin
This is because the tick is inline content so when the text wraps it will continue to flow as usual.
You can stop this behaviour by taking advantage of text-indent
:
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
By supplying a negative text-indent
you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left
you can cancel this offset out.
In the following example a value of 1.28571429em
is used because it is the width
set on the .fa-fw
by font-awesome.
ul { width: 300px;}li { padding-left: 1.28571429em; text-indent: -1.28571429em;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/><ul class="fa-ul custom-list"> <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li> <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li> <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li></ul>
How can I make padding apply to wrapped text with CSS?
What you want can be achieve using box-decoration-break
and it will even work with border-radius
:
.wrapper { width: 200px;}
h1 { font-size: 32px; font-family: Tahoma, Helvetica, sans-serif; line-height: 50px;}
.header-text { background: #aabbcc; padding-left: 20px; padding-right: 20px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
<div class='wrapper'> <h1> <span class='header-text'> Long text that wraps </span> </h1></div>
css single or multiple line vertical align
For this you can use display:table-cell
property:
.inline { display: inline-block; margin: 1em;}.wrap { display: table; height: 100px; width: 160px; padding: 10px; border: thin solid darkgray;}.wrap p { display: table-cell; vertical-align: middle;}
<div class="inline"> <div class="wrap"> <p>Example of single line.</p> </div></div>
<div class="inline"> <div class="wrap"> <p>To look best, text should really be centered inside.</p> </div></div>
Related Topics
Ie8 Ignores Td Width, Works on Ie7
What's The Most Efficient and Reliable Method to Test CSS Design in Multiple Legacy Browsers
How to Position Two Divs Above Each Over
How to Make a Simple Modal Window
Change in Doctype Causes Webpage to Render Differently
How Do Display a Boostrap/Angularui Alert Always on Top
CSS Selector: How to Style Items [1-2][5-6][9-10] etc by Pair
Custom Fields for Shopify User Registration Form
How to Change The Font of Some Textoutput Elements
How to Replace @Media (Max-Width) Using Stylish or Greasemonkey
Change Navbar Color in Twitter Bootstrap 2.0.4
CSS3/HTML 5/Png Blur Content Behind Element
Select Second Active Slide in Slickslider Through CSS-Selector
How to Calculate CSS Zoom Factor in Dependence on Screen Width
Integrate Less Version of Bootstrap-Material-Design to Rails Project
Stylesheet Not Parsed Because Non CSS Mime Types Are Not Allowed in Strict Mode