如何避免div随文本长度变化而浮动

Question

我正在创建一个包含一些文本的div。但是，当文本较长时，div开始浮动。我希望实现div的固定位置，即使输入的字符串更长。我已经检查了几个来源，但建议的信息不适用于我的代码链接。在css中添加vertical-align: top;的建议没有任何效果。请参阅下面的工作示例：链接：

JS-

function SinglePlaceMediumCard(props) {
const {
profileImage = "https://cdn.fastly.picmonkey.com/contentful/h6goo9gw1hh6/2sNZtFAWOdP1lmQ33VwRN3/24e953b920a9cd0ff2e1d587742a2472/1-intro-photo-final.jpg?w=1200&h=992&q=70&fm=webp",
username = "USERNAME123", // with a longer username the div postion changes
userShortTitle="SHORTTITLE", // same here with a longer short Title the div postion changes
textColor="black",
...rest
} = props;
return (
<div id="spm_card_container">
<div id="avatar_container">
<img id="detail_avatar" src={profileImage} />
</div>
<div id="user_info">
<span id="place_name" style={{ color: `${textColor}` }}>
{username}
</span>
<span
id="username"
style={{
marginLeft: 0,
paddingTop: 0,
color: `${textColor}`,
}}
>
{userShortTitle}
</span>
</div>
</div>
);
}
export default SinglePlaceMediumCard;

CSS

#spm_card_container {
width: 150px;
height: 50px;
/*border: #F16852 solid 1px;*/
background-color: transparent;
display: flex;
justify-content: center;
-webkit-user-select: none; /* Turns off copy images Chrome all / Safari all */
-moz-user-select: none; /* Turns off copy images Firefox all */
-ms-user-select: none; /* Turns off copy images IE 10+ */
user-select: none; /* Turns off copy images Likely future */
cursor: pointer;
}
#spm_card_container > div {
/*border: green solid 2px;*/
margin-left: 10px;
}
#avatar_container {
height: 50px;
width: 50px;
}
#avatar_container img {
border-radius: 50%;
height: 50px;
width: 50px;
}
#spm_card_container #user_info {
padding-top: 5px;
display: flex;
flex-direction: column;
justify-content: center;
/*align-items: center;*/
height: 70%;
}
#place_name {
/*font-family: 'Noto Sans', sans-serif;*/
font-weight: 800; /*Semi-Bold = 600*/ /*Bold = 700*/
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
/*float:left;*/
}
#username {
font-weight: 500; /*Semi-Bold = 600*/ /*Bold = 700*/
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 0.8rem;
/*float:left;*/
}
#detail_avatar {
height: 100%;
width: 100%;
}

我很高兴得到任何澄清。

Answer 1

从#spm_card_container中删除width和height

#spm_card_container {
/*border: #F16852 solid 1px;*/
background-color: transparent;
display: flex;
justify-content: center;
-webkit-user-select: none; /* Turns off copy images Chrome all / Safari all */
-moz-user-select: none; /* Turns off copy images Firefox all */
-ms-user-select: none; /* Turns off copy images IE 10+ */
user-select: none; /* Turns off copy images Likely future */
cursor: pointer;
}

Answer 2

添加css属性word-break: break-all;应该可以修复问题

#place_name {
/*font-family: 'Noto Sans', sans-serif;*/
font-weight: 800; /*Semi-Bold = 600*/ /*Bold = 700*/
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
word-break: break-all; // <------
/*float:left;*/
}

此外，如果#spm_card_container不合适，您可以删除/调整它的指定宽度。