个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我有以下问题，我真的不知道如何根据我的需要对 overlay 文本进行自动换行。我希望文本在叠加层的底部(或底部上方几个像素)被截断，并且我希望它以三点结束，所以像这样:eu dolor sed, euismod .. .
$('.container').mouseenter (function () {
//alert($(this).find('.soverlay').innerHeight()); //returns 56.8 px
var hgt = 'calc(100% - ' + parseInt($(this).find('.soverlay').innerHeight()+5) + 'px)';
$(this).find('.overlay').css({'height' : hgt});
});
$('.container').mouseleave (function () {
//alert($('.container .soverlay').innerHeight()); //returns 56.8 px
$(this).find('.overlay').css({'height' : '0px'});
});.container {
position: relative;
width: 50%;
max-width: 250px;
}
.image {
border-radius: 10px;
display: inline-block;
width: 100%;
height: auto;
box-sizing: border-box;
}
.soverlay {
border-radius: 10px 10px 0px 0px;
box-sizing: border-box;
position: absolute;
top: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
color: white;
font-size: 16px;
padding: 10px;
text-align: center;
overflow: hidden; /* remove on hover-in; add on hover-out*/
white-space: nowrap; /*remove on hover-in; add on hover-out */
text-overflow: ellipsis;
}
.overlay {
border-radius: 0px 0px 10px 10px;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
font-size: 12px;
color: white;
}
.container:hover .overlay {
/* height: calc(100% - 57px); /* change height depending on 'soverlay' height */
border-top: 3px solid yellow;
}
.container:hover .soverlay{
overflow: unset;
white-space: unset;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="soverlay">Some people just have very long names</div>
<div class="overlay">This is a very long job description which doesn't really fit in this div. Now the question is how do I cut of the text at the bottom of the overlay. </br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit convallis ligula, eget sollicitudin dolor lobortis ut. Duis venenatis, est vel volutpat dictum, magna mi pellentesque dolor, eu suscipit ligula augue eleifend justo. Nunc eleifend diam velit, id maximus eros tristique et. Donec sagittis mattis velit. Morbi gravida tincidunt metus in suscipit. Curabitur pharetra orci nec nunc sodales cursus. Morbi hendrerit id orci non vulputate. Duis nulla turpis, bibendum eu dolor sed, euismod mollis velit. Nullam tellus enim, condimentum porta rutrum ac, feugiat in ex. Sed tristique metus nunc, ut elementum elit hendrerit et. Quisque sed interdum ipsum. Etiam posuere.
</div>
</div>
</body>
</html>我已经设法通过将每个字符串的长度剪切成一定长度并附加三点来使用 PHP 进行变通，但实际上我想尝试仅使用 CSS 来完成(以进一步改进我的前端技能)。
最佳答案
You should add fix width to the .soverlay Div
.soverlay{width:250px;}
然后使用下面的 CSS 属性
word-wrap: break-word;
关于html - 叠加中的自动换行文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51063518/
28
4
0
我想做的是，如果鼠标位于“下一个”按钮上，它会以慢速向右滚动，如果鼠标没有位于“下一个”按钮上，它会停止滚动？ 这是我的尝试http://jsfiddle.net/mdanz/nCCRy/14/ $(
StyleCop 是一个很棒的视觉工作室小插件。但它不会向您显示实时提示或提供任何自动修复。 随之而来的是 reSharper 和 StyleCop for reSharper，这是理想的解决方案，但
我为我的MatchQuery使用了模糊性选项，但是我想将模糊性值设置为auto。有什么办法吗？ 另外，对于完成建议程序，您可以将其设置为支持unicode，对于我的MatchQuery，有什么方法可以
我想从表中获取一行[字符串名称，字符串密码，int 某些内容]并将其映射到一个 User 对象，该对象具有 3 个属性，如上面的 getter 和 setter有什么方法可以自动完成吗？我考虑过反射，
我有一个像这样的方法:void m1(string str) 并且有一个像这样的类: public class MyClass { public bool b1 { set; get; }
我正在尝试使用 $rootScope 从一个 Controller 向另一个 Controller $broadcast 一些数据。 如果我使用像 ng-click 这样的触发器来运行将广播的功能，它
我考虑了很多关于是要使用完全自动化的缓存还是手动缓存。 我们的自动方法是一种解决方案，它可以挖掘数据库、查询和格式化每个潜在和 future 的数据请求，并将其保存到适当的缓存存储(内存缓存或基于磁盘
我的 CSS 必须使用过渡来更改，直到现在我都使用 div:hover 来实现。 当您单击另一个 div 时需要激活过渡，而不是当您将鼠标悬停在必须移动/更改的 div 上时。 我该怎么做？ 谢谢 永
在我的应用程序中，我需要一些动画，但如果它已经设置了动画，则不需要持续时间。但我的问题是它会自动添加持续时间。 在这里你可以看到 2 个函数，第二个没有持续时间但它确实有持续时间(可能从 1 秒开始)
两年前，我需要制作一个工具，通过 POST 自动将 txt/csv 文件上传到我的 Web 服务器，然后使用 cronjob 通过 PHP 对其进行解析。 这有两次在每天午夜自动发生。尽管这行得通，但
请阅读下面程序中的评论: #include void test(char c[]) { c=c+2; //why does this work ? c--; printf("%
也许是个幼稚的问题，但是...... 确认或拒绝: 自动和静态存储持续时间的对象/变量的内存的存在是在编译时确定的，程序运行时失败的可能性绝对为零，因为没有足够的内存用于自动对象。 自然地，当自动对象
有没有什么方法可以自动获得类中属性更改的通知，而不必在每个 setter 中都编写 OnPropertyChanged？ (我有数百个属性，我想知道它们是否已更改)。 安东建议 dynamic pro
我们在使用 Azure DevOps 的项目中采用了 gitflow 流程。我有以下场景: 当功能分支合并到 Develop 时，我想在完成拉取请求的同时执行压缩合并策略 当 Release 分支定期
我的网站上有一个评论部分，我将 html 编码的评论保存在我的数据库中。所以我添加了这条评论- "testing" `quotes` \and backslashes\ and html 并将其保存在
是否存在“ checkin 前 TFS 自动 checkout ”这样的功能，以便在我说“ checkin ”之前我不会 checkout 任何文件，例如以防我只是临时更改文件 - 这一直发生。 换句
我有一个运行在 Linux/Apache/Tomcat 堆栈上的网站，它需要每隔几个月自动脱机以进行服务器维护，这将持续任意时间。有哪些选项可以让 Apache 建立和取消“服务器维护”页面？ 我需要
我经常在工作中创建文档，在公司内部，由于我们使用的首字母缩写词和缩写词的数量，我们几乎拥有自己的语言。因此，我厌倦了在发布文档之前手动创建首字母缩写词和缩写表，并且快速的谷歌搜索发现了一个可以有效地为
我希望在用户或宏将计算模式从自动更改为手动或手动更改为自动时运行代码。是否有为此触发的事件？ (属性是 Application.Calculation 在 Excel 互操作中。) 使用 Excel
这个问题在这里已经有了答案: Repeat command automatically in Linux (13 个回答) 6年前关闭。 我想创建一个脚本来获取另一个文件夹中的所有文件夹名称。并为这些
我是一名优秀的程序员,十分优秀！