Update _screen-reader.scss

Small improvements that could be important:
* `clip` [is deprecated](https://www.w3.org/TR/css-masking-1/#clip-property). Adding `clip-path` as progressive enhancement; the shorter notation came from @ryuran 's [suggestion](https://twitter.com/ryuran78/status/778943389819604992);
* [J. Renée Beach warned about single pixel with interfering with screen readers vocalisation](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) solved with `white-space`.

See [the detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/).

Also kinda related to issue twbs#20732 :)

Please let me know if you find any trouble with this technique. Thanks a lot!

scss/mixins/_screen-reader.scss

@@ -1,6 +1,7 @@
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content
+// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin sr-only {
   position: absolute;
@@ -9,7 +10,9 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0,0,0,0);
+  clip-path: inset(50%);
   border: 0;
 }
 
@@ -27,6 +30,8 @@
     height: auto;
     margin: 0;
     overflow: visible;
+    white-space: normal;
     clip: auto;
+    clip-path: none;
   }
 }