Блог

Главная - Вопросы по программированию - Как обернуть текст span с помощью display inline, чтобы соответствовать указанной ширине?

Как обернуть текст span с помощью display inline, чтобы соответствовать указанной ширине?

#html #css

#HTML #css

Вопрос:

Я пытаюсь заставить span переносить свой текст в соответствии с указанной шириной, отображая его встроенным с его одноранговым элементом. Кажется, что все, что я пытаюсь, текст, если слишком длинный, выходит за пределы того места, где я хочу, чтобы он останавливался, и снова и снова переходит в другой элемент.

HTML:

 <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>

CSS:

 .LeftAdjustedText .FreeQuest{
    display: inline;
}

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

Комментарии:

1. width не влияет на встроенные элементы, такие как spans. Непонятно, что вы пытаетесь сделать.

Ответ №1:

Внесены некоторые изменения в HTML и CSS, пожалуйста, посмотрите ссылку `

  <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;
}

`

Метки: