Pure css - one line ellipsis with toggle link - no javascript - http://jsfiddle.net/guenoz/k3eaxou6/

ellipsis.css

.container {
  position: relative;
}

.container .ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 5ch);
}

.container #toggle-label {
  color: blue;
  cursor: pointer;
  display: inline;
  font-weight: normal;
  margin-left: 5px;
}

.container #toggle-label::after {
  border-bottom: 1px dotted blue;
  content: "more";
  position: absolute;
  top: 0;
}

.container #toggle-input {
  display: none;
}

.container #toggle-input:checked ~ #toggle-label::after {
  content: "less";
  position: relative;
}

.container #toggle-input:checked ~ .ellipsis {
  display: inline;
  overflow: visible;
  text-overflow: inherit;
  white-space: inherit;
}

ellipsis.html

<p class="container">
  <input type="checkbox" id="toggle-input">
  <span class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
  <label id="toggle-label" for="toggle-input"></label>
</p>

ellipsis.sass

.container
  position: relative
  .ellipsis
    display: inline-block
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    width: calc(100% - 5ch)
  #toggle-label
    color: blue
    cursor: pointer
    display: inline
    font-weight: normal
    margin-left: 5px
    &::after
      border-bottom: 1px dotted blue
      content: "more"
      position: absolute
      top: 0
  #toggle-input
    display: none
    &:checked ~ #toggle-label::after
      content: "less"
      position: relative
    &:checked ~ .ellipsis
      display: inline
      overflow: visible
      text-overflow: inherit
      white-space: inherit

ellipsis.scss

.container {
    position: relative;

    .ellipsis {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 5ch);
    }
    
    #toggle-label {
      color: blue;
      cursor: pointer;
      display: inline;
      font-weight: normal;
      margin-left: 5px;

      &::after {
        border-bottom: 1px dotted blue;
        content: "more";
        position: absolute;
        top: 0;
      }
    }

    #toggle-input {
      display: none;

      &:checked ~ #toggle-label::after {
        content: "less";
        position: relative;
      }

      &:checked ~ .ellipsis {
        display: inline;
        overflow: visible;
        text-overflow: inherit;
        white-space: inherit;
      }
    }
  }