设置新闻代码以包含中断语句

Question

我正在努力创建一个列表新闻自动收报机，并在此链接上找到了一个简单的实现： j查询新闻行情

我想在生成的动态列表内容中包含<br>语句，并希望新闻自动收报机自动管理股票代码的高度。

但是，包含<br/>元素的列表项不会在多行中显示新闻项。 请注意，在我的实际代码中，列表内容将动态生成，因此，我的新闻自动收报机应该能够管理其内容中的任意数量的<br/>并动态管理股票代码的高度。

任何人都可以建议如何实现这一目标吗？

这是我的示例代码：

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>

Answer 1

请从类">.news-list"中删除语句"position:relative;">

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>