<div class="container">
  <p><code>text-overflow: clip</code></p>
  <div class="element element-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, velit, aspernatur, facilis excepturi architecto error veritatis possimus explicabo maiores magnam modi numquam reprehenderit necessitatibus suscipit minus voluptatem amet harum ea.
  </div>
  <p><code>text-overflow: ellipsis;</code></p>
  <div class="element element-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, obcaecati, eaque qui in eligendi nemo fuga beatae itaque repellendus dicta error sed eius? In, iure reprehenderit illum perspiciatis vel sed!
  </div>
  <p><code>text-overflow: " >>";</code> (string) (Firefox only)</p>
  <div class="element element-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, itaque nihil velit illo ex nostrum facere repudiandae sapiente impedit ipsa vitae ipsam neque error in obcaecati? Dignissimos enim eligendi labore.
  </div>
  <p><code>text-overflow: " (Read More...)";</code> (string) (Firefox only)</p>
  <div class="element element-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, itaque nihil velit illo ex nostrum facere repudiandae sapiente impedit ipsa vitae ipsam neque error in obcaecati? Dignissimos enim eligendi labore.
  </div>
  <hr>
  <p>
    The following are the same examples with the <code>direction</code> set to <code>rtl</code>, meaning that the overflow will happen on the left side of the element.
  </p>
  <div class="wrapper" dir="rtl">
    <p><code>text-overflow: clip</code></p>
    <div class="element element-1">
      تعرف على أهم أنواع الطعام التى تقوى جهازك المناعى
    </div>
    <p><code>text-overflow: ellipsis;</code></p>
    <div class="element element-2">
      تعرف على أهم أنواع الطعام التى تقوى جهازك المناعى
    </div>
    <p><code>text-overflow: ">>";</code> (string) (Firefox only)</p>
    <div class="element element-3">
      تعرف على أهم أنواع الطعام التى تقوى جهازك المناعى
    </div>
    <p><code>text-overflow: " (يتبع)";</code> (string) (Firefox only)</p>
    <div class="element element-4">
      تعرف على أهم أنواع الطعام التى تقوى جهازك المناعى
    </div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  max-width: 400px;
  border: 1px solid black;
  background-color: white;
  overflow: hidden;
  white-space: nowrap;
}

.element-1 {
  text-overflow: clip;
}

.element-2 {
  text-overflow: ellipsis;
}

.element-3 {
  text-overflow: ">>";
}

.element-4 {
  text-overflow: "(Read More...)";
}

.wrapper .element {
  max-width: 250px;
}

.wrapper .element-4 {
  text-overflow: "(يتبع)";
}