- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为包含代码中第一行文本的 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/
我的文本溢出有问题:省略号 - 它不想与我的网站一起使用。我目前正在学习并且我有这个元素,其中我有带有固定高度文本的 div。我试过 text-overflow: ellipsis 但我似乎无法让它工
这个问题在这里已经有了答案: Limit text length to n lines using CSS (18 个答案) 关闭 10 年前。
我无法得到“文本溢出:省略号;”上类...也许有人可以在这方面给 ma 一些帮助:-) 小例子: http://jsfiddle.net/qKS8p/2/ http 标记: …
我试图强制将一个小 div 中的段落全部排成一行,不换行,并且当它们溢出 div 时用省略号截断。 我使用 white-space:nowrap; 时没有换行,但即使我已将 text-overflow
如何让我的文本填充 的空间标签,然后用省略号将其截断? 您可以在此处查看用于填充文本的“卡片”示例。该卡片的高度固定,为 150 像素,内边距为 20 像素。段落元素在卡片内仅具有固定的空间量,并且
这个问题在这里已经有了答案: Prevent content from expanding grid items (3 个答案) 关闭 3 年前。 当使用 CSS 网格时,我似乎无法使 text-o
以下 fiddle 正确淡出文本,但省略号仍然不透明。 http://jsfiddle.net/Wexcode/TJ7A9/ Incorrect #incorrect { widt
默认情况下,如果我们有 'text-overflow: ellipsis',省略号会在文本中添加 '...',但我的场景需要通过 两颗星 * *。 纯 CSS 如何实现? 注意:需要支持IE9+、ch
如何知道字符串的省略子串和可见子串? fiddle :https://jsfiddle.net/dyfkqhk4/1/ 我想知道: 原始文本:这是一些省略的文本 可见文本:这是 省略文本:一些省略文本
我有这样的东西: text text text text text text div{ width:100px; border: 1px solid black;
这个问题在这里已经有了答案: Fast punctuation removal with pandas (4 个答案) 关闭 4 年前。 我正在使用这段代码,但它不会删除“省略号”: Column
这是例子 #div2 { white-space: nowrap; width: 12em; overflow: hidden; text-overflow: ellipsis;
我有以下 html - http://jsfiddle.net/o8e4n30n/ 14 Cras justo sto odio asdasda sdas
我有一个移动网站的顶部栏,如下所示: 用户可以通过单击他/她的名字来打开个人菜单。当人名很长(蓝色条)时,我想使用 text-overflow: ellipsis 来缩短它。 我让它工作(看起来像蓝色
是否可以在 text-overflow: ellipsis 上设置点的样式? 一个例子是将省略号加粗,例如“Lorem Ips ...” 最佳答案 灵感来自 this answer , 这是一种设置省
我有一个包含一些内部内容的 div,当它溢出时我需要一个省略号。我已经在其他元素上多次执行此操作,但出于某种原因,这并没有达到预期的效果。 此外,我故意留下 white-space:nowrap; 因
在闲逛命名空间时,我注意到一个名为Ellipsis 的奇怪对象,它似乎并没有什么特别之处,但它是一个全局可用的内置函数。 经过搜索,我发现 Numpy 和 Scipy 在切片语法的一些晦涩变体中使用了
这个 CSS: text-overflow: ellipsis; 发生溢出时将 "StartOfLineMiddleOfLineEndOfLine" 更改为 "StartOfLineMiddleOfL
我想在文本上实现showMore类型的文本来代替ellipsis or fade。就像我们可以通过React https://www.npmjs.com/package/react-show-more
我需要一行带有图标的文本,并且如果该行太长,则应以省略号(...)结束。 Breaking to the right 这是我的代码: Flexible _buildAddress() { retu
我是一名优秀的程序员,十分优秀!