Geek Answers Handbook

CSS Only Ellipse (ie "...") Hiding and Extending

When the user clicks on the ellipse, I want the text to be displayed. The following example shows a clean implementation of what I mean using jquery. This example shows expand and collapse, 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.
Run codeHide result

I want to achieve the same result without using javascript. (Ultimately, I am trying to find a way to recreate this feature in an in-office email handled by Outlook, but I would be pleased with the simple clean CSS response, even if it could not work in Outlook).

, "visited", "" "". , "" .

- CSS/HTML, ? -, . , , , - Outlook.

0
5

- .

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

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

+1

.

.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>
Hide result

, , @PraveenPuglia , . .

0

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.
Hide result
0

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

<br/><br/>

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

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

</a> runs too.
Hide result
0

:focus, text-overflow, tabindex : inline < > inline-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>
Hide result
0

More articles:


All Articles