CODEWITHSUNDEEP
css
Runny Yolk
Runny Yolk

Reputation: 1164

CSS Make text wrap when :before pseudo element is too big

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.

enter image description here

enter image description here

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

Answers (5)

mojtaba roohi
mojtaba roohi

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

Farzin Kanzi
Farzin Kanzi

Reputation: 3443

You can only set:

.parent{
   display: flex;
 }
 .parent:before, .parent span {
    flex: 1;
  }

Upvotes: 0

Domino
Domino

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

Donnie D&#39;Amato
Donnie D&#39;Amato

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

Larpee
Larpee

Reputation: 830

Try setting the white-space property to pre-wrap

Upvotes: 3

Related Questions