Html 如何包装跨度'；是否将显示为内联的文本设置为适合指定宽度？

我试图获得一个span来包装它的文本以适应指定的宽度，同时与它的对等元素内联显示。似乎无论我尝试什么，如果文本太长，就会超出我希望它停下来的位置，并进入另一个元素

HTML:

---

在HTML和CSS中做了一些更改，请看一看`

欢迎对您的入住体验提出任何意见

20000000000000000000000000000000000000000000000000000000 
.LeftAdjustedText.FreeQuest{
浮动：左；
宽度：100%；
}
.QuestText{
浮动：左；
宽度：100%；
}
.LeftAdjustedText.FreeQuest span.CommentMaxLen{
最大宽度：400px；
宽度：70px；
单词包装：打断单词；
浮动：左；
}

---

`

width

对跨距等内联元素没有影响。不清楚你想做什么。

<div class="LeftAdjustedText">
    <div class="FreeQuest">
        <span class="QuestText">We welcome any comments about your check-in experience</span><br>
        <textarea cols="50" rows="5" maxlength="2000"></textarea>
        <div><span class="QuestText CommentMaxLen">2000</span> </div>
    </div>
</div>

.LeftAdjustedText .FreeQuest{
    display: inline;
}

.LeftAdjustedText .FreeQuest span{
    width: 466px;
}

 <div class="FreeQuest">
        <span class="QuestText">We welcome any comments about your check-in experience</span><br>
        <textarea cols="50" rows="5" maxlength="2000"></textarea>
        <div><span class="CommentMaxLen">20000000000000000000000000000000000000000000000000000000</span> </div>
    </div>
</div> 

.LeftAdjustedText .FreeQuest{
    float:left;
    width:100%;
}
.QuestText {
  float:left;
  width:100%;
}
.LeftAdjustedText .FreeQuest span.CommentMaxLen{
    max-width: 400px;
    width: 70px;
    word-wrap: break-word;
    float:left;
}