<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>
</div>

  <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>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
  width: 100vw;
  min-height: 100vh;
  padding: 2vw;
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
  gap: 2vw;
}

.element {
  padding: 20px;
  max-width: 400px;
  margin: 10px 0;
  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: "(يتبع)";
}