Html line wrap padding

How to add horizontal padding to every line in one multi-line wrapped sentence?

This is what it currently looks like: http://i48.tinypic.com/2dqvo1i.png Is there a way to add padding to the sides of the highlighted text? Regular padding on the SPAN doesn’t work, because it only takes into account the the beginning and end of the sentence, not every line separately. Any ideas? CSS3 code is fine.

Just to clarify, are you looking for each line of the wrapped text to be padded differently? If not, why not just apply the padding to the div tag?

7 Answers 7

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:

Not really a solution, but does add some space before the break.

Thanks. It indeed doesn’t solve the problem, but the added space does help me towards the look I’m going for.

Just pad the «p» tags that surround the spans. The «p» tag (unlike span) is a block-level element, so padding on the top, bottom, or sides will work as expected.

I want to pad the yellow strips of texts, so the text isn’t so close to side. Example mock-up: i50.tinypic.com/206dlef.png When adding the padding to the P, it just adds padding to the block as whole. However, I want to add the padding to the lines of text individually. I’m starting to think it’s not possible, because the line of text is already interpreted as ONE element, but for my idea to work, it needs to interpret each line of text separately for the horizontal padding to work.

Unfortunately though, I CAN’T create separate elements for each line, because they are created dynamically and I don’t know the ‘break-off’ point beforehand. Ideally there would be an :each-line pseudo-selector, that I could use to pad each line individually.

Источник

How to apply a line wrap/continuation style and code formatting with css

When presenting preformatted text on the web (e.g. code samples), line wrapping can be a problem. You want to wrap for readability without scrolling, but also need it to be unambiguous to the user that it is all one line with no line break. For example, you may have a really long command line to display, like this:

c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped" 

(Stackoverflow forces a line like this not to wrap.) Is there a way of styling with CSS to give the same treatment as you see in books? i.e. to wrap the line, but include an image or glyph that indicates a line continuation. Obviously I am looking for a style that can be applied to all text, and let the browser’s XHTML/CSS rendering engine figure out which lines have wrapped and therefore need the special treatment.

The Solution so far..

Adding line continuation glyphs

Thanks to Jack Ryan and Maarten Sander, have a reasonably workable solution to add continuation glyphs to either the left or right of wrapped lines. It requires an image with repeating glyphs in the vertical, which is offset so that it is invisible if only one unwrapped line. The main requirement of this technique is that every line needs to be within a block (e.g. p, span or div). This means it cannot easily be used manually with existing text that is just sitting in a pre block. The fragment below summarises the essential technique. I posted a live example here.

.wrap-cont-l < margin-left: 24px; margin-bottom: 14px; width: 400px; >.wrap-cont-l p < font-family: Courier New, Monospace; font-size: 12px; line-height: 14px; background: url(wrap-cont-l.png) no-repeat 0 14px; /* move the background down so it starts on line 2 */ text-indent: -21px; padding-left: 14px; margin: 0 0 2px 7px; >.wrap-cont-r < margin-left: 24px; margin-bottom: 14px; width: 400px; >.wrap-cont-r p < font-family: Courier New, Monospace; font-size: 12px; line-height: 14px; background: url(wrap-cont-r.png) no-repeat right 14px; /* move the background down so it starts on line 2 */ text-indent: -28px; margin: 0 0 2px 28px; padding-right: 14px; >

 
take a long line
 
take a long line
 
 
take a long line
 
reel him in
 
 

But wait, there’s more!

I recently discovered syntaxhighlighter by Alex Gorbatchev. It is a fantastic tool for dynamically and automatically formatting text blocks. It is principally intended for syntax highlighting code, but could be used for any text. In v1.5.1 however, it does not wrap lines (in fact it forces them not to wrap). I did a little hacking around though, and was able to add a simple line wrap option syntaxhighlighter and also incorporate the continuation glyph idea. I’ve added this to the live examples and included a few notes on the hacks required (they are trivial). So with this as the text in the page:

Источник

How to wrap lines in an inline-block with CSS?

buttons , owners and text have display: inline-block . This looks fine when text is fairly small: However, as the text grows, inline-block elements extend and eventually fall over the line: This is ugly, and I would like to avoid that.
What I want to achieve instead is this: When the text is too large to fit inside the element, I want it to be wrapped by lines.
I tried setting float: left on the elements, but couldn’t get it working. What’s the proper way to do this with HTML and CSS (no tables)?

4 Answers 4

The exact result you desire can be achieved if you use floats instead of display: inline-block .

Learn something new every day! Thanks @thirtydot. I noticed it also works with overflow: auto; (at least in Safari). Perhaps that’s a more desirable value?

thirtydot’s link now seems to be dead — it’s in the archive here web.archive.org/web/20150530032915/http://colinaarts.com/…

It looks like the page isn’t redirecting properly. It still exists and is a great read: colinaarts-com.herokuapp.com/articles/…

You have to specify some max-width with percentage:

As far as I know, this is the only sensible possible solution. Though you may not want to use percentages for the width.

Thanks for the response. The problem with this approach is you’re going to get different text widths for different rows (jsfiddle). This is very close, but I need the text to occupy all available space to the right.

There is a very nice flexbox solution if you have the browser support:

/* flexbox additions */ ul li < display: flex; >.buttons < flex-shrink: 0; >.owners < flex-shrink: 0; margin-right: 6px; >/* original CSS (inline-block is technically no longer necessary) */ .buttons < display: inline-block; >.owners < display: inline-block; >.text < display: inline-block; >/* the rest is visual styling */ ul li < line-height: 1.5em; padding: 12px 8px 12px 8px; margin-bottom: 12px; margin-top: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 15px; background-color: #DBEAFF; min-height: 23px; >.buttons < min-width: 13px; vertical-align: top; margin-top: 3px; margin-bottom: -3px; >.buttons a

  
Даня Абрамов
short text
  
Даня Абрамов
longer text longer text longer text longer text longer text longer text longer text longer text longer text
  
Даня Абрамов и Саша Васильев
longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text
  
Даня Абрамов и Саша Васильев
трали-вали трали-вали трали-вали трали-вали

Источник

How to apply padding to every line in multi-line text?

I have background color applied to the tag, there is also left and right padding set on it. The problem is: the padding is applied only to the left (beginning) and right (ending) of the , not the left (beginning) and right (ending) of each line when the text is wrapped on several lines. How can I apply the left and right padding to the middle lines?

The quick brown fox jumps over the lazy dog.

Why not set up the different areas for the text in divs and just give them different background colors?

The padding is applied only to the left (beginning) and right (end) of each span, not the left (beginning) and right (end) of each line. This is working per the specification.

This is an interesting question but you should insist on the fact that the issue appears especialy when the text spans on several lines (padding left/right doesn’t work)

5 Answers 5

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

The quick brown fox jumps over the lazy dog.

Источник

Background color on text, maintain left padding on line wrap

I am attempting to create a style that applies a background color to header text. This is simple enough by including an inline element within my header, but problems arise when there is a line wrap because the left padding is only applied to the first line of text. To solve this issue I am applying a left-border to my header tags, which properly maintains left padding during line wraps. However, I’m having serious issues matching the left-border height with the inline element background across browsers. I get it matched up in Chrome/Safari, and it’s off in Firefox, etc. I’ve created a fiddle to demonstrate: http://jsfiddle.net/spidercoder/4KJn2/1/ My approach is: HTML:

Lorem ipsum dolor sit amet consectetur adipiscing elit.
 

h1 < color: white; text-transform: uppercase; font-family: sans-serif; font-size: 34px; line-height: 44px; border-left: 10px solid black; padding: 8px 0 7px 0;>// This tweaks the height of the left-border h1 span

I’ve attempted several different approaches, but unfortunately nothing is working. This seems like a fairly simple effect to pull off, but I have been unable to properly match the height of the border with the span background across browsers, which ruins the effect. Does anyone have any ideas on how to pull this off so it works across browsers? An approach that doesn’t require the left-border would probably be best, so that we don’t have to match element heights. Thanks for any suggestions!

Источник