CSS仅椭圆（即“...”）折叠&扩张 [英] CSS Only Ellipse (i.e. "...") Collapsing & Expanding

问题描述

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

  $（'。collapse'）。 ）.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 =collapsehref =＃dataText = never> ;. 。 。< / a> 
 $ 
 
 
 
我想实现相同的结果，而不使用任何javascript 。 （最终，我试图找到一种方法来重建在Outlook处理的办公室电子邮件中的此功能，但我会满意一个简单的纯CSS答案，即使它不能在Outlook中工作）。
 
 
 
我的第一本能是使用visited标签，以及after和before内容内容标签。我发现一些过时的支持对于这种方法，但最终隐私问题导致访问受到严重限制。
 
 
 
任何人都可以想到另一个基于CSS / HTML的实现，将实现所需的结果？也许涉及列表或表单元素的。更简单的越好越好，因为我的最终目标是在Outlook中工作。
解决方案
 
 
 
 
 
 
 
  / **初始设置** /。省略号内容，.ellipsis-toggle输入{display：none;}。省略号toggle cursor：pointer;} / **检查状态** /。省略号切换输入：checked + .ellipsis {display：none;}。省略号切换输入：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> < / p> 
 
 
 
 $  b 
 $ b 
 支持  -  IE 9+，Chrome，Firefox，Opera 9+，Safari 3 +。
 
When a user clicks an ellipse, I want some text to display.  The following example shows a clean implementation of what I have in mind using jquery.  This example shows expanding and collapsing, the CSS solution 



$('.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.





I want to achieve the same result without using any javascript.  (Ultimately, I'm trying to find a way to recreate this function in intra-office emails processed by Outlook, but I'd be satisfied with a simple pure CSS answer even if it couldn't work in Outlook).

My first instinct was to use the "visited" tag, along with an "after" and "before" content content tag.  And I found some outdated support for this approach, but ultimately privacy concerns have lead "visited" to be severely limited.

Can anyone think of another CSS/HTML based implementation that would achieve the desired result?  Perhaps something involving lists or form elements.  The simpler the better, given that my ultimate goal is to get this working in Outlook.
解决方案
Here's something I came up with.



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





Support - IE 9+, Chrome, Firefox, Opera 9+, Safari 3+.

                        
这篇关于CSS仅椭圆（即“...”）折叠&amp;扩张的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！