Reputation: 1164
I'm trying to make the text inside a span wrap when it's too long for its parent. The span has a :before pseudo element with a fixed width.
The problem is, when I add white-space: normal
to the parent element, the span text wraps to the next line, but it goes all the way to the left of the parent element.... It's hard to explain with words, so here's a JSFiddle:
https://jsfiddle.net/cpkzwzko/1/
I want the span text to wrap, but for the first wrapped word to be inline with the first word of the line above, as demonstrated in this skilful mockup.
I've tried adding white-space: nowrap;
to the parent element and white-space: normal;
to the span, but it doesn't work.
Is this possible using CSS?
Thanks everyone!
Thanks for any
Upvotes: 2
Views: 8865
Reputation: 751
you can insert a new line / line break in that content, use the \A escape characters and use css white-space: pre-wrap;
Upvotes: 0
Reputation: 3443
You can only set:
.parent{
display: flex;
}
.parent:before, .parent span {
flex: 1;
}
Upvotes: 0
Reputation: 6788
First off, you'll want the element to be an inline-block, not an inline, as you don't want its content to flow like normal text. I'd replace the span with a div to keep it semantically accurate. Then you want it to take 50% of its parent, just like the :before.
50% + 50% + a couple pixels of borders will be too big to fit in the parent element, so the second inline-block will wrap. To prevent this, use border-box which makes the css width property include the border and padding. This code will apply that to all elements on a site, which is what many modern sites do because it makes CSS much simpler.
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
The problem with inline-block element is that a single space is kept between them, so even with two elements at 50%, a space will exist in-between. To prevent that... you have to remove the space in the HTML code.
<div class="parent"><div>
This is a string which is too long to fit in the parent next to it's :before pseudo selector
</div></div>
So don't put a newline or any whitespace between the parent and the child div. It's a shame, but there isn't much else we can do. Except this, which also works:
<div class="parent"><!--
--><div>
This is a string which is too long to fit in the parent next to it's :before pseudo selector
</div><!--
--></div>
But it's quite ugly.
Now you also need to put a vertical alignment on your elements so that they align to the top and not baseline.
And voilà:
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.parent {
width: 600px;
border: 1px solid black;
white-space: normal;
}
.parent:before {
content: "Before Pseudo Element";
display: inline-block;
width: 50%;
border: 1px solid green;
vertical-align: top;
}
.parent div {
display: inline-block;
max-width: 50%;
border: 1px solid blue;
white-space: normal;
}
<div class="parent"><div>
This is a string which is too long to fit in the parent next to it's :before pseudo selector
</div></div>
Upvotes: 5
Reputation: 3940
I made the span a display:block;
and floated the :before
and span
elements with width:50%;
Also had to change the box-sizing
to border-box
to help with the extra width from the borders and then added a clearfix.
*, *:before, *:after{
box-sizing:border-box;
}
.parent {
width: 600px;
border: 1px solid black;
white-space: normal;
}
.parent:after{
content:"";
display:block;
clear:both;
}
.parent:before {
content: "Before Pseudo Element";
display: inline-block;
width: 50%;
border: 1px solid green;
float:left;
}
.parent span {
display: block;
border: 1px solid blue;
white-space: normal;
float:left;
width:50%;
}
<div class="parent">
<span>
This is a string which is too long to fit in the parent next to it's :before pseudo selector
</span>
</div>
Upvotes: 1