Skip to content

Instantly share code, notes, and snippets.

@manchicken

manchicken/examples.markdown

Created December 2, 2016 20:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manchicken/5f70036946a881f98f10c630fc2117b0 to your computer and use it in GitHub Desktop.
Save manchicken/5f70036946a881f98f10c630fc2117b0 to your computer and use it in GitHub Desktop.
Download ZIP
Examples
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml" lang="ar" xml:lang="ar">
<head><title>FOO!</title></head>
<body>
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow -->
<p class="overflow-visible">أدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاح</p>
<p class="overflow-clip">أدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاح</p>
<p class="overflow-ellipsis">أدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاح</p>
<p class="overflow-string">أدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاحأدخل سعر الافتتاح</p>
</body>
</html>
Raw
style.css
* { direction: rtl; }
p {
width: 200px;
border: 1px solid;
padding: 2px 5px;
/* BOTH of the following are required for text-overflow */
white-space: nowrap;
overflow: hidden;
}
.overflow-visible {
white-space: initial;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-string {
/* Not supported in most browsers,
see the 'Browser compatibility' section below */
text-overflow: " [..]";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment