    
|
|
|
This is one of those tricky CSS things that I see come up every few months. I guess what better place to address it than CSS-Tricks eh?
The situation involves ragged-right inline text. Like when a paragraph of text breaks to the next line whenever the next word won't fit (i.e. most text on the internet). You want to add a background behind that text which:
What you can't do is simply apply a background and padding to, say, the <p> element. Paragraphs are block-level, so the background will simply be a rectangle and not follow the ragged-right-ness.
You also can't simply apply the background and padding to a <span> or an inline element. The left and right padding will only apply to the very first and very last line. On each of the middle lines, the background will butt up immediately next to the text.
Describing this is a bit futile. Here's the problem visually:
What we want is for each line to be padded like the beginning of that first line and end of that last line. We don't want to resort to anything gross like wrapping each line in it's own span (where lines break is to unpredictable). And there is no such thing as :nth-line unfortunately.
There are some solutions though!
The big trick here is using white-space: pre-wrap; That gives us the padding on the ragged-right lines. Then to get the padding along the left, a pseudo element is added along the left edge. Here's the original and then my fork to show the elements at work:
See the Pen BtpGo by Chris Coyier (@chriscoyier) on CodePen
Unfortunately Firefox doesn't dig the way the pseudo element is positioned in that technique. Probably fixable, but, there might be a better way...
Turns out you can use zero-spread box-shadow on an inline element on only the x-axis to pad each line. Essentially:
.padded-multi-line {
display: inline;
background: orange;
box-shadow: 10px 0 0 orange, -10px 0 0 orange;
}Here is the original and then my fork to show how it works:
See the Pen Wrapping Highlighted Text by Chris Coyier (@chriscoyier) on CodePen
Fair warning: Dave says don't use this. I'm including it because I think it's clever and in some weird way actually feels less hacky to me. The idea is to go through the text of each element and replace the spaces with the unicode character \u205f, the MEDIUM MATHEMATICAL SPACE character. This works with the padding better on the right edge for whatever reason. For the left edge, you just use a border-left along the block-level parent element.
Here is the original and my stripped down fork:
See the Pen Wrapping Highlighted Text by Chris Coyier (@chriscoyier) on CodePen
It's a bit tricky to get the line-height just right so the border lines up with the padding, but I'm sure you can figure it out. There is probably even some fancy math to use to make sure it's right.
If JavaScript works for you, there is also a jQuery wraplines plugin in which then you could apply the padding to each individual line. Demo.
Turns out you can do this with almost no fancy CSS or JS at all, but using three elements. You need a block-level parent for a border-left. Then an inline element to apply the padding and background to. Then another inline element to nudge the text back to the left to get the padding on the right edges.
<div class="padded-multiline">
<h1>
<strong>
How do I add padding to subsequent lines of an inline text element?
</strong>
</h1>
</div>.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}The original is in this thread, and my demo:
See the Pen pvBFg by Chris Coyier (@chriscoyier) on CodePen
During a discussion that popped up over this, Adam pointed out there is a new CSS property that is (as I understand it) specifically for this. This removes the need for three elements. Technically you only need one, the inline element, but it's likely you'll be doing this on a header so you'll probably end up with a block-parent anyway, which is best for spacing.
Here is the original and my stripped down demo:
See the Pen hIvFe by Chris Coyier (@chriscoyier) on CodePen
This is working in modern Chrome and Safari, but not Firefox, in my quick tests. Even Chrome and Safari require it to be -webkit-box-decoration-break.
That's all I was able to dig up, but I didn't spend an entire day searching or anything. Would love to hear more, particularly ones which require very little code, have good browser support, and don't feel hacky.
Multi-Line Padded Text is a post from CSS-Tricks
]]>|
|
"When is the last time you wrote something? Really wrote something, putting pen to paper, and not just typing away an email or report on a computer or smartphone. If it's been awhile, you might want to consider getting back into the practice -- writing (whether it be expressive writing, like you would do in a diary, or keeping a gratitude journal) has been linked with a number of benefits for both body and mind. Read through the list for some ways to write your way to a better you."
He is a Biochemistry major currently research the Human Immunodeficiency Virus (HIV) and Murine Leukemia Virus (MLV). He is also involved with SGA and the Minority Association of Premedical Students (MAPS). He hopes to pursue a degree in Medicine.
What research have you been doing this summer?
I have been working on transcription of the 5’ untranslated region of the Moloney Murine Leukemia Virus (MLV) genome in the structural biology lab of Dr. Michael F. Summers.
How did you find out about this opportunity?
I got this opportunity by emailing Dr. Summers and asking for a position in his lab and I was interviewed by him. There was no formal application process.
Who did you work with on this project?
I work with Dr. Summers, Deborah Girma (my grad student mentor), and Alex Emmanuelli, a biochemistry senior.
Was this your first independent research project?
No it’s my second involvement in research.
Do you get course credit for this work or get paid? How much time do you put into it?
During the summer I put in 40 hours a week but during the school year I will be working 8-10 hours weekly. This was a paid position.
What academic background did you have before you started?
I had finished two years of general and organic chemistry as well as three of the four biology courses required for biochemistry majors.
How did you learn what you needed to know to be successful in this summer project?
The project involved a lot of hands-on learning. I received on-the-job training from my graduate student.
What has been the hardest part about your work this summer?
The initial learning curve period; the time it took for me to get used to working in this lab.
What was the most unexpected thing?
The coolest thing about my lab is the willingness to teach and be taught displayed by everyone. We have a great working environment.
How does this research experience relate to your course work?
It is a biochemistry lab and I am a biochemistry major so there is perfect correlation between research and coursework.
What is your advice to other students about getting involved in research?
Apply quickly and apply early. Email professors asking about positions in their labs, talk to friends who are currently in labs asking if there are openings. Read up on the work done by the researchers at UMBC and apply to whatever interest you. If you have the chance to interview, prepare for it and be confident.
What are your career goals?
I plan to go to medical school and get an MD/PhD after my time at UMBC
What else are you involved in on campus?
I work with the SGA, I’m a member of UMBC National Residence Hall Honorary (NRHH), I’m a member of Minority Association of Premedical Students, (MAPS), and I’m involved with Bethel Campus Fellowship.
Read his abstract here..
]]>