How to display a text with dots when resizing the browser window?

Question

How can I display my text with dots when I resize the browser window using CSS ?

Eg:

My text

'Hello world! Welcome to Coding'

After resizing

Hello world! Welcome to Co...

Hello world! Welcome t... (Would display dots according to resizing of window)

Using [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) might help you — Carl Binalla, Oct 18 '19 at 05:13

score 0 · Answer 1 · answered Oct 18 '19 at 05:19

0

Try this CSS.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

answered Oct 18 '19 at 05:19

Nachiket Patel

21
2

score 0 · Answer 2 · answered Oct 18 '19 at 05:21

You can archive this using text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

For more information go to: text-overflow

Let me know if you have a any question about this.

Hope this help you

    .app a {
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Hello world! Welcome to Coding</a>
</div>

score 0 · Answer 3 · answered Oct 18 '19 at 05:34

Below is a basic example of how to use text-overflow: ellipsis;. You need the overflow: hidden; property to be present as well as white-space: nowrap;

HTML: <p class="overflow"> this text will not wrap and will show the ellipsis when it is wider than the screen width</p>

CSS:

.overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

How to display a text with dots when resizing the browser window?

3 Answers3