- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
第一个解决方案有效。如您所见:
<!DOCTYPE>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ellipsis.whole.html</title>
<style>
a {
text-decoration : none
}
.box {
background-color: #ddd;
width: 250px;
}
.box p {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Solution 1</h1>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean vehicula odio ac nisl
dignissim hendrerit. Proin libero arcu, commodo
in aliquam porta, dignissim sodales<span><a href="http://www.google.com/">...</a></span></p>
</div>
</body>
</html>
第二个解决方案来了!我看不出两者之间的区别,但第二个不起作用。任何人都可以知道两者之间有什么区别?我已经看过多次但没有答案。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ellipsis.link.html</title>
<style>
a {
text-decoration: none;
}
.box {
background-color: #ddd;
width: 250px;
}
.box p {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Solution 2 </h1>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean vehicula odio ac nisl
dignissim hendrerit. Proin libero arcu, commodo
in aliquam porta, dignissim sodales tortor. Sed
dignissim mi cursus quam sollicitudin, vitae
semper nunc finibus. In id turpis velit. Nullam
finibus lobortis lacus vel egestas. In pretium
dictum ligula quis pulvinar. Aenean id dolor metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec commodo elementum erat blandit blandit.
Cras quis elementum mi<span><a href="http://www.google.com/">...</a></span>.</p>
</div>
</body>
</html>
为什么我不能点击第二版代码中的省略号?我好奇地等待着你的回答!
最佳答案
如果您仔细观察,您会注意到在这两个版本中,您都将这部分代码的行数限制为 5:
-webkit-line-clamp: 5;
因此在第二个示例中(其中有更多文本)“...”部分不可点击,因为省略号创建了三个点以表明有继续的文本。如果您尝试将该数字更改为“15”(关于 15 行),将显示整个文本并且最后的“...”部分将是可点击的。您还可以删除
-webkit-box-orient: vertical;
部分和代码将忽略上限行限制并显示整个文本,无论您在代码中的 'line-clamp' 标签中放置什么。
关于html - 我邀请你做一个小游戏,我想让省略号成为链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51505368/
我正在学习 Go,但我无法在任何地方找到这个答案。 Web开发中的文件扩展名是否有任何官方标准?我见过多种约定,例如 .tmpl 和 .gtpl,这是什么?谢谢。 最佳答案 没有固定的标准,但有一些相
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 8 年前关闭。 Improve
假设我有两个类(class) Widget ^ | Window 我还有另一个类应用程序: 定义如下 class Application { public: ... private:
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我多年来一直在使用 MySQL,直到去年左右,主要是在较小的项目上。我不确定是语言的性质还是我缺乏真正的教程让我不确定我正在写的东西是否是优化目的和扩展目的的正确方法。 虽然自学 PHP,但我对自己和
我已经多次读到 EJB 是重量级的……但昨晚我正在浏览关于 EJB 的 Java EE 6 教程,它们似乎只是普通的 Java 对象,除了它们可以有像 Stateless 或 Singletons 这
如何使此 SimpleModal 脚本在页面加载时加载而不是单击按钮?谢谢=) Demo 基本模态对话框 对于此演示,SimpleModal 使用此“隐藏”数据作为其内容。您还可以使用标准 HTML
这是 Haskell 中的代码: class Fooable a where foo :: a -> a instance Fooable (a, a) where foo = ...
是否有推荐的方法来测试 Actor 是否使用 be 正确改变了其行为?我更喜欢使用 FSM 的原因之一是因为我可以轻松验证 Actor 是否已更改其行为。我不知道在使用 become/unbecome
我正在构建一个位于“php my admin”中的表,我是在第一次点击其中一个“th”它的 asc 时这样做的,现在我试图在第二次点击时制作 desc ..有什么想法吗? 阿姆..很多我不记得了抱歉.
考虑以下网页。 我在 Firefox 中打开此页面,打开 JS 控制台并键入以下内容。 > document.getElementById(
如何让自己成为 postgresql 的 super 用户? 我一直在尝试创建数据库,但我不断收到以下错误: createdb: database creation failed: ERROR: pe
Query没有太大帮助。 如前所述here , PostgreSQL 是 ORDBMS。 here ,它解释了 PostgreSQL 是 RDBMS。 PostgreSQL 是一个 ORDBMS 是什
我已经看到,当在导航元素中使用的链接中垂直/水平居中文本时,将链接设置为 flex 容器会很有用。我没有意识到链接文本实际上可以是一个(单个) flex 元素。我可以看到链接中的 span 元素可以是
我见过很多说明如何找到给定集合的子集的示例,但是您如何将一个集合设为另一个集合的子集?所以集合 B 是集合 A 的子集,这将如何实现?我目前正在使用递归性质的方案,但是这本书只展示了如何列出子集而不是
有些程序会根据其标准输出是否为 tty 来更改其输出。因此,如果您将它们放入管道或重定向它们,输出将与您的 shell 中的不同。这是一个例子: $ touch a b c # when runnin
我正处于项目的开始阶段,到目前为止我一直在使用默认的 MySQL 数据库。 对了,默认的数据库有名字吗? 我的问题是如何在不删除当前表和创建新表的情况下将现有表更改为 utf-8 和 InnoDB。是
我正在尝试编写一个过滤器来包装数据以遵循 JSON API spec到目前为止,它适用于我直接返回 ActionResult 的所有情况,例如 ComplexTypeJSON。我试图让它在像 Comp
我在 Storyboard 上创建了一个带有一个 UITextField 的自定义 UIViewController。在 viewDidLoad 上,我将 UITextFIeld 设置为 become
我已经看到关于 valueless_by_exception 方法的 cppreference 的以下注释: A variant may become valueless in the followi
我是一名优秀的程序员,十分优秀!