If screen size is mobile size ,replace the end of the HTML text with two dots

Question

How can I change the end of a HTML text and replace it with two dots , if resolution is for mobile or tablet size? And without changing the size of the buttons (all buttons same size). Thanks i.e. Stackoverflow --> Stack..

.flex-buttons {
  display: flex;
  flex-wrap: nowrap;

}

.flex-buttons > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-buttons">
  <div>Stackoverflow12345</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>      
  <div>Stackoverflow</div>
</div>

Does this answer your question? [Overflow:hidden dots at the end](https://stackoverflow.com/questions/486563/overflowhidden-dots-at-the-end) and [How can I show dots (“…”) in a span with hidden overflow?](https://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow) — caramba, Jun 24 '21 at 19:15
This is not for screen size or mobile size, this is just a function how to add dots at the end of a text.. — , Jun 24 '21 at 21:50

score 3 · Accepted Answer · answered Jun 24 '21 at 19:10

Use overflow: hidden; white-space: nowrap; in conjuntion with text-overflow: ellipsis;, the later displays the ... where text overflow is present on the content.

.flex-buttons {
  display: flex;
  flex-wrap: nowrap;
  background-color: aqua;
}

.flex-buttons > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="flex-buttons">
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>      
  <div>Stackoverflow</div>
</div>

If screen size is mobile size ,replace the end of the HTML text with two dots

1 Answers1