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

这是我想出来的东西。

＆＃13;

/**
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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

使用复选框。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 3

您可以使用焦点或活动

CSS 和 HTML

＆＃13;

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

＆＃13;

Tom <a class="collapse" href="javascript:void(0)" dataText="">
<span class="dataBlank">. . .</span>
<span class="dataText">{ never }</span>
</a> runs.

＆＃13;

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:'...'; }

段

＆＃13;

.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;
}

＆＃13;

Tom <a class="x" href="#"></a> runs.

<br/><br/>

Sally <a class="y" href="#z">

    <span id="z"></span>

</a> runs too.

＆＃13;

Answer 5

:focus，text-overflow，tabindex并切换阻止格式化上下文：inline＆lt;＆gt; 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. <hr/> Tom { never } runs.

CSS Only Ellipse（即“......”）折叠＆amp;扩大

5 个答案:

段