Html 当标题标记较大时，按钮在下方移动

我在一个移动网站上工作，我有如下代码

<div class="profile-div-wrapper">
   <div class="profile-div">
    <div class="header">
     <img src="assets/images/image.png" alt=""><h3 id="txtDisplayUserName">Surajjjjjjjjjjj Shukla</h3>
     <a href="update_user_profile.html" class="bttn3">Edit Profile</a>
    </div>
   </div>
</div>

苏拉杰·舒克拉

当标题较大时，锚定编辑轮廓将在下方移动

小提琴也一样。如何解决这个问题

注意：请确保您调整移动设备的大小以查看问题。

CSS

尝试将此添加到现有代码中：

.profile-div .header {
  display: flex;
  align-items: center;
}
.profile-div .header a.bttn3 {
  margin-left: auto; //instead of float: right;
  display: flex; //instead of display: block;
  //to vertically & horizontaly align the text inside the button
  align-items: center;
  justify-content: center;
}

---

在标题标签上设置一个

最大宽度

，并在其中的内容超过该宽度时进行剪辑，您可以使用

文本溢出：省略号如果你喜欢用省略号剪辑它“…”没有得到你@UncaughtTypeErrorSee here@Suraj:（可能会引导你正确的方向）我得到了“文本溢出：省略号；”但无法在我的代码上实现相同的功能…请发布一段到目前为止的代码片段<代码>文本溢出：省略号

依赖于一些补充样式，例如显式设置的

宽度

或

最大宽度

，

溢出：隐藏

，以及

空白：nowrap标题越大，按钮越短，我的意思是我只能看到编辑then@SurajShukla尝试在编辑中检查JSFIDLE。@SurajShukla如果您想让按钮保持固定宽度，请添加
最小宽度：115px
，如果您注意到您的小提琴，按钮的样式已经改变了我的外观，现在它影响了我的形象。由于某种原因，它被扭曲了。。。