CSS Only Ellipse (i.e. "...") Collapsing & Expanding

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 a

Solution 1:

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

Solution 2:

You can play with focus or active

CSS and 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.

Solution 3:

Use a checkbox.

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

Note this is less like your sample code than @PraveenPuglia's answer below, which allows you to just click the ellipses to toggle. This solution causes the whole block to trigger a state change.

Solution 4:

Use the :before or :after pseudo-class in combination with :hover or :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.

Solution 5:

:focus , text-overflow , tabindex and switching the block formating context : inline<>inline-block can help. DEMO

Your html can turn to be : <p>Tom <b tabindex="0">{ never }</b> runs.</p> CSS will do the dots and hide/show.

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>