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-toggleinput {
  display: none;
}
.ellipsis-toggle {
  cursor: pointer;
}
/**
Checked State
**/.ellipsis-toggleinput:checked + .ellipsis {
  display: none;
}
.ellipsis-toggleinput:checked ~ .ellipsis-content {
  display: inline;
  background-color: yellow;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias
  <labelclass="ellipsis-toggle"><inputtype="checkbox" /><spanclass="ellipsis">...</span><spanclass="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 <aclass="collapse"href="javascript:void(0)"dataText=""><spanclass="dataBlank">. . .</span><spanclass="dataText">{ never }</span></a> runs.

Solution 3:

Use a checkbox.

.eli {
  position:relative;
}
.eliinput {
  opacity:0;
  width:100%;
  height:100%;
  position:absolute;
  z-index:1;
}
.eliinput + .sm {
  display:inline-block;
}
.eliinput:checked + .sm {
  display:none;
}
.eliinput + .sm + .lg {
  display:none;
}
.eliinput:checked + .sm + .lg {
  display:inline-block;
}

<spanclass=eli><inputtype="checkbox">Tom <spanclass="sm">. . .</span><spanclass="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 <aclass="x"href="#"></a> runs.

<br/><br/>

Sally <aclass="y"href="#z"><spanid="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 <btabindex="0"> text to show or not ?</b> Use of tabindex and focus.</p><hr/><p>Tom <btabindex="0">{ never }</b> runs.</p>