CSS Only Ellipse (i.e. "...") 折叠和展开

Question

当用户单击椭圆时，我希望显示一些文本。下面的例子展示了我使用 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Tom <a class="collapse" href="#" dataText="never">. . .</a> runs.

我想在不使用任何 javascript 的情况下达到相同的结果。 （最终，我试图找到一种方法在 Outlook 处理的办公室内部电子邮件中重新创建此功能，但即使它在 Outlook 中无法使用，我也会对简单的纯 CSS 答案感到满意。

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

谁能想到另一个基于 CSS/HTML 的实现可以达到预期的结果？也许something 涉及列表或表单元素。考虑到我的最终目标是让它在 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;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias
  <label class="ellipsis-toggle">
    <input type="checkbox" />
    <span class="ellipsis">...</span>
    <span class="ellipsis-content">illum mollitia quas beatae sit dolor et architecto ab voluptatum</span>
  </label>voluptate in incidunt unde voluptates maiores enim inventore rerum, nulla quae.</p>

支持 - IE 9+、Chrome、Firefox、Opera 9+、Safari 3+。

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 <a class="collapse" href="javascript:void(0)" dataText="">
<span class="dataBlank">. . .</span>
<span class="dataText">{ never }</span>
</a> 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;
}

<span class=eli>
<input type="checkbox">Tom <span class="sm">. . .</span> <span class="lg">{never}</span> runs
</span>

请注意，这不像您的示例代码，而不是下面@PraveenPuglia 的答案，它允许您只需单击省略号即可切换。此解决方案会导致整个区块触发状态更改。

Answer 4

将:before or :after 伪类与:hover 或:target 结合使用

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

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

片段

.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 <a class="x" href="#"></a> runs.

<br/><br/>

Sally <a class="y" href="#z">

    <span id="z"></span>

</a> runs too.

Answer 5

:focus、text-overflow、tabindex 并切换块格式化上下文：inlineinline-block 可以提供帮助。 DEMO

你的 html 可以变成：<p>Tom <b tabindex="0">{ never }</b> runs.</p> 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;
}

<p>Click to toggle hide/show text or dots below: NOJS</p>
<p>Here is a <b tabindex="0"> text to show or not ?</b> Use of tabindex and focus.</p>
<hr/>
<p>Tom <b tabindex="0">{ never }</b> runs.</p>