0

I am getting some text from the server and adding in quotes to that on the front end using markup. The problem is that sometimes only the end quote gets wrapped onto a new line. How do I prevent this from happening.

I dont mind if the last word gets wrapped along with the quote.

I have tried using white-space: nowrap on the text but I dont know the length of the text beforehand so I dont want it to exceed the width of containing element so white-space: nowrap doesn't work.

Edit:

<div class="quote">

        <span class="quote-opening">&ldquo;</span>
        <p class="quote-body">Some famous quote here thats being returned from the server
            <span class="quote-closing">&rdquo;</span>
        </p>
                                
</div>


.quote{

 .quote-opening{
  width: 10%;
  display: inline-block;
    vertical-align: top;
 }

 .quote-body{
  width: 90%;
 }

}

I want to indent only the text and the closing quote to the right with a margin of 10px. Thats why I am trying to do display: inline-block for the opening quote.

user3312156
  • 153
  • 1
  • 1
  • 8
  • Is there a space that's ending up between the last word and the quote? I did some checking, and the behavior I got was that a word would wrap if it was followed by a quote and the quote wouldn't fit. – BurningLights Dec 15 '15 at 01:29
  • Thanks! I think that just worked. Moving the span to the same line as the p tag worked. Also the server was returning a space at the end for some reason. If anyone is seeing this - check both to make sure. – user3312156 Dec 15 '15 at 01:49

1 Answers1

0

Using overflow:hidden applied to your quote should work, but it depends on your implementation. Providing your code would help.

This existing answer explains the application of this technique.

Community
  • 1
  • 1
Ben Rondeau
  • 2,983
  • 1
  • 15
  • 21