I heard you defined text-overflow: ellipsis; Don’t take effect?

Have your friends ever tried this?

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Copy the code

Three in a row and no ellipsis? And start taking chances and hoping it works? Now we’ll give you the exact solution, go

The first thing we need to know:

text-overflow:ellipsis; This property takes effect only if the following conditions are true:

• The container that wraps the text must have a certain width, a certain width, such as 100px, and a certain percentage.
  %Text-overflow :ellipsis does not work because many people give the container a percentage width
• The container that wraps the text must set two properties at the same time:
  overflow:hidden 和
  white-space:nowrap

Both elements are indispensable.

Take a chestnut

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>
Copy the code

.app a {
  height: 18px;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: # 000;
}
Copy the code

The ellipsis above is not in effect, why?

The reason:

The a tag is an inline element, and the width is still in effect. You also need to give display:inline-block or display:block to make the width work