I have requirement where CSS text should be in next line. Please see the attached image
Before Applying CSS
"Access Level".
I want new line immediately after it is encountered with space. For example in Executive User I want "Executive" and "User" in different line but not in same line as shown in the above figure. For your understanding I have created image in paint how it should be after applying CSS. Please see the below figure
Thanks for your inputs though but java script is mostly not allowed in my project. If there is a way in CSS it is much appreciated. Thanks for your suggestions.
Anyway, if you really want to add a break line after a blank, you'll have to use JavaScript. You cannot do it with pure CSS.
The simplest workaround with CSS would be to give a width to the labels in order to make the second word create a second line. But it's not dynamic since it rely on words length.
You can do one thing. Make one main div for check-box area.
Than in that place check-box in one div & right label in other div. And fix the width of right label & set line height. I think your problem will get resolved.
Hi Everyone,
I have requirement where CSS text should be in next line. Please see the attached image
Before Applying CSS
"Access Level".
I want new line immediately after it is encountered with space. For example in Executive User I want "Executive" and "User" in different line but not in same line as shown in the above figure. For your understanding I have created image in paint how it should be after applying CSS. Please see the below figure
After Applying CSS
"Access Level Modified"
That's not css it just need a
That would be the simplest way.
You can't do this with CSS alone , you would need javascript.
Overall, it's not worth it IMO.
Thanks for your inputs though but java script is mostly not allowed in my project. If there is a way in CSS it is much appreciated. Thanks for your suggestions.
Nope...not with CSS on the text.
CSS can't detect spaces and there is no 'first-word' selector.
Thanks Paulie_D for your input I will let them know that it is not possible through CSS.
You can cheat though (although I wouldn't recommend it)...http://codepen.io/Paulie-D/pen/uvDLt
This may just be me, but forcing user to be on the second line affects readability. When readability is low so too is rate-of-completion.
Just a thought.
Here's one way, a fork of Paulie's pen
Yeah, I thought of that but it depends on the length of the first word being long.
http://codepen.io/Paulie-D/pen/tbuaA
I have to second @posterity576's post. Why are you doing this? Unless there is a really good reason, you should avoid it as it decreases readability.
Same as @posterity576 and @joshuanhibbert, I don't really see the point.
Anyway, if you really want to add a break line after a blank, you'll have to use JavaScript. You cannot do it with pure CSS.
The simplest workaround with CSS would be to give a width to the labels in order to make the second word create a second line. But it's not dynamic since it rely on words length.
You can do one thing. Make one main div for check-box area. Than in that place check-box in one div & right label in other div. And fix the width of right label & set line height. I think your problem will get resolved.
@pratikbhatt2009
That has the same problem that it will depend on the length of the first word being long enough to create a break.
Unless there is an overriding UX / UI reason for this two line concept, I wouldn't bother.
Frankly, why even have the word user repeated...just put it in the heading?
http://codepen.io/Paulie-D/pen/tbuaA