andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix #15

Browse Source
This commit is contained in:
atomiks
2018-02-28 17:59:52 +10:00
parent 2dc414e40f
commit a568a45dfa
4 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/4d4edbda57043aeeabeac31d2dd12d0d.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -227,4 +227,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
white-space: nowrap;
text-overflow: ellipsis;
}
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__truncate-text"> This text will be truncated if it exceeds 200px in width. </p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>overflow: hidden</code> prevents the text from overflowing its dimensions (for a block, 100% width and auto height).</li> <li><code>white-space: nowrap</code> prevents the text from exceeding one line in height.</li> <li><code>text-overflow: ellipsis</code> makes it so that if the text exceeds its dimensions, it will end with an ellipsis.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 98.1% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=text-overflow" target="_blank">https://caniuse.com/#feat=text-overflow</a> </li> </ul> </div> </div> </main> </div> <footer class="footer"></footer> </body> </html>
</code></pre> <h4 data-type="Demo">Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__truncate-text"> This text will be truncated if it exceeds 200px in width. </p> </div> <h4 data-type="Explanation">Explanation</h4> <ol> <li><code>overflow: hidden</code> prevents the text from overflowing its dimensions (for a block, 100% width and auto height).</li> <li><code>white-space: nowrap</code> prevents the text from exceeding one line in height.</li> <li><code>text-overflow: ellipsis</code> makes it so that if the text exceeds its dimensions, it will end with an ellipsis.</li> </ol> <h4 data-type="Browser support">Browser support</h4> <div> <div class="snippet__browser-support"> 98.1% </div> </div> <p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=text-overflow" target="_blank">https://caniuse.com/#feat=text-overflow</a> </li> </ul> </div> </div> </main> </div> <footer class="footer"></footer> </body> </html>

2
index.html
View File

@ -1030,7 +1030,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
98.1%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=text-overflow" target="_blank">https://caniuse.com/#feat=text-overflow</a>

2
snippets/truncate-text.md
View File

@ -46,6 +46,6 @@ If the text is longer than one line, it will be truncated and end with an ellips
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
<span class="snippet__support-note">⚠️ Only works for single line elements.</span>
* https://caniuse.com/#feat=text-overflow