Left aligned caption for center aligned responsive image part 2

Question

@partypete25 and whoever else may be can help!

Thanks for:

Left aligned caption for center aligned responsive image

and

https://jsfiddle.net/mk7on98L/19/

It's working for me as well! However I cannot seem to have multiple lines of text underneath the image. I tried to use a BR and add more lines of text but that errors out. Any suggestions on multiple lines of text with a BR at the end of each line of text? Thanks!

I'm trying to use something like this:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span class="text-center center-block" style="max-width:100%">
        <span data-caption="line 1 of text <br> line 2 of text <br> line 3 of text" class="img-wrapper text-left">
          <img class="img-responsive" src="http://placehold.it/350x150">
        </span>
      </span>
    </div>
  </div>
</div>

Regards,

Answer 1

I think you were making this two hard on yourself. Just seperate the caption from the image.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span style="width:100%; margin:0 auto;">
          <img class="img-responsive" src="http://placehold.it/350x150">
      </span>
      <span class="caption">line 1 of text <br> line 2 of text <br> line 3  of text</span>
    </div>
  </div>
</div>

Answer 2

对于多行，您需要在.img-wrapper上指定宽度