CSS Only Ellipse（即“…”）折叠和扩展

当用户点击椭圆时，我想要显示一些文本。 以下示例显示了使用jquery时我想到的干净实现。 此示例显示了CSS解决方案的扩展和折叠

$('.collapse').click( function(){ if( $(this).attr('dataStatus') != "visible" ) {$(this) .html('{ ' + $(this).attr('dataText') + ' }') .attr('dataStatus','visible') } else {$(this) .html('. . .') .attr('dataStatus','hidden') } }); 

 .collapse { color: black; text-decoration: none; } 

  Tom . . . runs. 

我想在不使用任何javascript的情况下实现相同的结果。 （最终，我正在尝试找到一种方法来在Outlook处理的局内电子邮件中重新创建此function，但即使它无法在Outlook中运行，我也会对简单的纯CSS答案感到满意）。

我的第一直觉是使用“已访问”标记，以及“之后”和“之前”内容内容标记。 我发现这种方法有一些过时的支持 ，但最终隐私问题导致“访问”受到严重限制。

任何人都可以想到另一种可以达到预期效果的基于CSS / HTML的实现吗？ 也许涉及列表或表单元素的东西 。 考虑到我的最终目标是让它在Outlook中运行，越简单就越好。

Answer 1

这是我想出来的东西。

 /** Initial Setup **/ .ellipsis-content, .ellipsis-toggle input { display: none; } .ellipsis-toggle { cursor: pointer; } /** Checked State **/ .ellipsis-toggle input:checked + .ellipsis { display: none; } .ellipsis-toggle input:checked ~ .ellipsis-content { display: inline; background-color: yellow; } 

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias   ... illum mollitia quas beatae sit dolor et architecto ab voluptatum voluptate in incidunt unde voluptates maiores enim inventore rerum, nulla quae. 

Answer 2

您可以使用焦点或活动

CSS和HTML

 .collapse:focus .dataBlank, .collapse:active .dataBlank{ display:none; } .collapse .dataText{ display:none; } .collapse:focus .dataText, .collapse:active .dataText{ display:inline-block; } 

 Tom  . . . { never }  runs. 

Answer 3

使用复选框。

 .eli { position:relative; } .eli input { opacity:0; width:100%; height:100%; position:absolute; z-index:1; } .eli input + .sm { display:inline-block; } .eli input:checked + .sm { display:none; } .eli input + .sm + .lg { display:none; } .eli input:checked + .sm + .lg { display:inline-block; } 

  Tom . . . {never} runs  

Answer 4

使用:before或:after伪类与:hover或:target

 .x:hover:before { content:'has the'; } .x:before { content:'...' } #z:target:before { content:'has the'; } #z:before { content:'...'; } 

SNIPPET

 .x, .y { color: black; text-decoration: none; } .x:hover:before { content: 'has the'; color: red; } .x:before { content: '...'; transition: color .35s ease-in; } #z:target:before { content: 'has the'; color: red; } #z:before { content: '...'; transition: color 1.5s ease-in; } 

 Tom  runs. 

 Sally    runs too. 

Answer 5

:focus ， text-overflow ， tabindex和切换块格式化上下文： inline <> inline-block可以提供帮助。 DEMO

你的html可以变成：

Tom { never } runs.

CSS会做点并隐藏/显示。

 b { display: inline-block; width: 1.25em; text-indent: -0.35em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; vertical-align: bottom; color: red; } b:focus { display: inline; pointer-events: none; } 

 
Click to toggle hide/show text or dots below: NOJS
 
Here is a  text to show or not ? Use of tabindex and focus.
 
 
Tom { never } runs.