gpt4 book ai didi

javascript - 文本溢出 :ellipsis scrolling text on hover

转载 作者:行者123 更新时间:2023-12-01 00:00:05 26 4
gpt4 key购买 nike

我正在尝试为包含代码中第一行文本的 div 实现水平文本滚动(会有很多行)...只要它在,它就应该在循环中滚动悬停或聚焦,并且仅当文本被 chop 时。如果不是,则无需滚动该行。

P.S:有一些额外的 CSS,不用担心...我需要它用于页面的其他部分。

<style>
table {

background-color: #EFEFEF;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.7);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
}

table, td, th {
border: 0px;
}

tr:nth-child(even) {background-color: #FBFBFB;}


th, td {
padding: 0px;
}

tr:hover {
background-color: #F2F4EB;
}

.relpack-genre {
margin-top: -7px;
margin-bottom: 5px;
font-size:13px;
color:#777777;
}

.relpack-like {
width: 15%;
text-align: right;
height: 24px;
vertical-align: middle;
padding-right:10px;
cursor: pointer;
}

.relpack-session{
margin: 5px 0 0 5px;
white-space: nowrap;
text-overflow: ellipsis;

}
.relpack-art-cover {
display: flex;
width:200px;
overflow: hidden;
position: relative;
}

.clicked {
color : chartreuse;
}

span.like-count .fa-thumbs-up:before{

margin-right:5px;

}


.widget-container .relpack-genre{
margin-top: 0;
}
.like-count .far{
font-family: 'Font Awesome 5 Free','Roboto';
}
</style>

<table style="table-layout: fixed;">
<tbody>
<tr style="height: 24px;">
<td class="relpack-art-cover">
<div class="relpack-session">
<div>This text should be scrolling horizontally when it's hovered or in focus.</div>
<div>second text</div>
</div>
</td>
</tr>
<tr style="height: 24px;">
<td class="relpack-art-cover">
<div class="relpack-session">
<div>This text should be scrolling horizontally when it's hovered or in focus.</div>
<div>second text</div>
</div>
</td>
</tr>
<tr style="height: 24px;">
<td class="relpack-art-cover">
<div class="relpack-session">
<div>This shouldn't scroll,as it fits.</div>
<div>second text</div>
</div>
</td>
</tr>
</tbody>
</table>

最佳答案

试试这个方法......

<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<style>
table {

background-color: #EFEFEF;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.7);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
}

table, td, th {
border: 0px;
}

tr:nth-child(even) {background-color: #FBFBFB;}


th, td {
padding: 0px;
}

tr:hover {
background-color: #F2F4EB;
}

.relpack-genre {
margin-top: -7px;
margin-bottom: 5px;
font-size:13px;
color:#777777;
}

.relpack-like {
width: 15%;
text-align: right;
height: 24px;
vertical-align: middle;
padding-right:10px;
cursor: pointer;
}

.relpack-session{
margin: 5px 0 0 5px;
white-space: nowrap;
text-overflow: ellipsis;

}
.relpack-art-cover {
display: flex;
width:300px;
overflow: hidden;
position: relative;
}

.clicked {
color : chartreuse;
}

span.like-count .fa-thumbs-up:before{

margin-right:5px;

}


.widget-container .relpack-genre{
margin-top: 0;
}
.like-count .far{
font-family: 'Font Awesome 5 Free','Roboto';
}
.relpack-session:hover .scroll {
animation: sweep 3s linear infinite;
}
@keyframes sweep {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
</style>

<table style="table-layout: fixed;">
<tbody>
<tr style="height: 24px;">
<td class="relpack-art-cover">
<div class="relpack-session">
<div>This text should be scrolling horizontally when it's hovered or in focus.</div>
<div>second text</div>
</div>
</td>
</tr>
<tr style="height: 24px;">
<td class="relpack-art-cover">
<div class="relpack-session">
<div>This text should be scrolling horizontally when it's hovered or in focus.</div>
<div>second text</div>
</div>
</td>
</tr>
<tr style="height: 24px;">
<td class="relpack-art-cover">
<div class="relpack-session">
<div id="short">This shouldn't scroll,as it fits.</div>
<div>second text</div>
</div>
</td>
</tr>
</tbody>
</table>

<script>

$( ".relpack-session div" ).each(function() {
if ($(this)[0].scrollWidth > $(this).innerWidth()) {
$(this).addClass("scroll")
$(this).css("border", "1px solid transparent")
}
});

</script>
</body>
</html>

关于javascript - 文本溢出 :ellipsis scrolling text on hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60789903/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com