阅读更多链接根据左侧内容宽度显示/隐藏

Question

当左侧内容小于宽度时，我需要删除“更多”按钮，因此在其周围没有省略号。

如果左侧文本大于左侧内容，则省略号截断效果很好。

第二部分显示必须删除的更多按钮。

.parent {
  width: 500px;
  display: flex;
  align-items: center;
}

.parent .child {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parent .shortAndFixed {
  white-space: nowrap;
  color: blue;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

<div class="parent">
  <p class="child">This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
  <span class="shortAndFixed">
    MORE
  </span>
</div>

<div class="parent">
  <p class="child">This is a paragraph</p>
  <span class="shortAndFixed">
    MORE
  </span>
</div>