Style News Ticker to include Break statement

I'm working to create a List news ticker and found a simple implementation on this link: jQuery News Ticker

I want to include the <br> statement inside the generated dynamic list contents and would like the news ticker to manage the height of ticker automatically.

However, the list items containing <br/> element doesn't display the news item in multiple lines. Please note that in my actual code, the list contents will be generated dynamically, thus, my news ticker should be able to manage any number of <br/> in its content and manage the height of ticker dynamically.

Can anyone please suggest how to achieve this?

Here's my sample code:

var ticker = $("#ticker");
var t;

var li_count = 1;
var li_length = $("ul.news-list li").length;

var li = $("li").first();

var runTicker = function(trans_width) {
  $(li).css({
    "left": +trans_width + "px"
  });
  t = setInterval(function() {
    if (parseInt($(li).css("left")) > -$(li).width()) {
      $(li).css({
        "left": parseInt($(li).css("left")) - 1 + "px",
        "display": "block"
      });
    } else {
      clearInterval(t);
      trans_width = ticker.width();
      li = $(li).next();
      if (li_count == li_length) {
        li_count = 1;
        li = $("li").first();
        runTicker(trans_width);
      } else if (li_count < li_length) {
        li_count++;
        setTimeout(function() {
          runTicker(trans_width);
        }, 500);
      }
    }
  }, 5);
}
$(ticker).hover(function() {
    clearInterval(t);
  },
  function() {
    runTicker(parseInt($(li).css("left")));
  });
runTicker(ticker.width());

#ticker {
  line-height: 1.8em;
  max-width: 600px;
  color: #000;
  overflow: hidden;
  min-height: 40px;
  height: auto;
}

.news-list {
  padding: 0;
  margin: 0;
  position: relative;
  list-style-type: none;
}

ul.news-list>li {
  position: absolute;
  white-space: nowrap;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
  <ul class="news-list">
    <li>
      <p>My Paragraph<br/> with break.</p>
    </li>
    <li>
      <ul>
        <li>My Paragraph</li>
      </ul>
    </li>
    <li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
  </ul>
</div>

Solution

Please remove the statement "position:relative;" from the class ".news-list"

var ticker = $("#ticker");
var t;

var li_count = 1;
var li_length = $("ul.news-list li").length;

var li = $("li").first();

var runTicker = function(trans_width) {
  $(li).css({
    "left": +trans_width + "px"
  });
  t = setInterval(function() {
    if (parseInt($(li).css("left")) > -$(li).width()) {
      $(li).css({
        "left": parseInt($(li).css("left")) - 1 + "px",
        "display": "block"
      });
    } else {
      clearInterval(t);
      trans_width = ticker.width();
      li = $(li).next();
      if (li_count == li_length) {
        li_count = 1;
        li = $("li").first();
        runTicker(trans_width);
      } else if (li_count < li_length) {
        li_count++;
        setTimeout(function() {
          runTicker(trans_width);
        }, 500);
      }
    }
  }, 5);
}
$(ticker).hover(function() {
    clearInterval(t);
  },
  function() {
    runTicker(parseInt($(li).css("left")));
  });
runTicker(ticker.width());

#ticker {
  line-height: 1.8em;
  max-width: 600px;
  color: #000;
  overflow: hidden;
  min-height: 40px;
  height: auto;
}

.news-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul.news-list>li {
  position: absolute;
  white-space: nowrap;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
  <ul class="news-list">
    <li>
      <p>My Paragraph<br/> with break.</p>
    </li>
    <li>
      <ul>
        <li>My Paragraph</li>
      </ul>
    </li>
    <li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
  </ul>
</div>

var ticker = $("#ticker");
var t;

var li_count = 1;
var li_length = $("ul.news-list li").length;

var li = $("li").first();

var runTicker = function(trans_width) {
  $(li).css({
    "left": +trans_width + "px"
  });
  t = setInterval(function() {
    if (parseInt($(li).css("left")) > -$(li).width()) {
      $(li).css({
        "left": parseInt($(li).css("left")) - 1 + "px",
        "display": "block"
      });
    } else {
      clearInterval(t);
      trans_width = ticker.width();
      li = $(li).next();
      if (li_count == li_length) {
        li_count = 1;
        li = $("li").first();
        runTicker(trans_width);
      } else if (li_count < li_length) {
        li_count++;
        setTimeout(function() {
          runTicker(trans_width);
        }, 500);
      }
    }
  }, 5);
}
$(ticker).hover(function() {
    clearInterval(t);
  },
  function() {
    runTicker(parseInt($(li).css("left")));
  });
runTicker(ticker.width());

#ticker {
  line-height: 1.8em;
  max-width: 600px;
  color: #000;
  overflow: hidden;
  min-height: 40px;
  height: auto;
}

.news-list {
  padding: 0;
  margin: 0;
  position: relative;
  list-style-type: none;
}

ul.news-list>li {
  position: absolute;
  white-space: nowrap;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
  <ul class="news-list">
    <li>
      <p>My Paragraph<br/> with break.</p>
    </li>
    <li>
      <ul>
        <li>My Paragraph</li>
      </ul>
    </li>
    <li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
  </ul>
</div>