作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的句子很少。在第一句话的结尾(在这一行),我想添加剧透,这将保留故事的其他部分。我正在尝试这样做,但是当单击更多时.. - 我的文本跳到下一行。我需要在一行中继续文本更多...请不要告诉我任何脚本,我只想使用 HTML + CSS。谢谢。
details {
display: inline-block;
}
summary {
display: inline-block;
}
<blockquote>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
<details>
<summary>
More..
</summary>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</details>
</blockquote>
最佳答案
1) 使所有复制元素显示为“内联”,而不是内联 block (因此它们像 span 而不是 div 一样工作)
2) 在详细信息打开时隐藏摘要元素“更多..”,方法是将其显示设置为无。
代码如下:
blockquote {
display: inline;
}
details {
display: inline;
}
summary {
display: inline;
}
details[open] summary {
display: none;
}
<blockquote>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
<details>
<summary>
More..
</summary>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</details>
</blockquote>
关于html - 如何用一句话在一行中插入<details>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41922483/
我是一名优秀的程序员,十分优秀!