как предотвратить разрыв слов при использовании стилей css для тега div?

#html #css

#HTML #css

Вопрос:

всем привет, я новичок в использовании стилей css,

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

 <div style="float:left; display:block;  word-wrap:break-word; width: 250px">                                                                   
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>  
</div>

здесь я привязываю почтовое сообщение к label во время выполнения.

Как автоматически переносить текст при применении к нему содержимого без разделения слова.

кто-нибудь может предложить, как это реализовать?

заранее спасибо

Ответ №1:

я думаю, вам нужно удалить word-wrap:break-word из вашего стиля. Это нарушает ваши слова. Редактировать чтобы перенести текст, вы можете установить ширину абзаца или содержащего его div определенного размера

пример:

width: 400px

Обновить:

 <div class="text">
    <asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>

CSS:

 div.text {
   float:left; width: 250px; white-space: normal;
}

я не уверен, как рендерится asp, я предполагаю, что это становится тегом

 div.text label {
   display:block; width: 100%;
}

1. @lbrahim Diallo спасибо за ваш ответ, если я удалю слово-перенос: разрыв-word, текст выходит за рамки размера, есть ли какой-либо способ управлять текстом для корректировки размера?

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

Ответ №2:

Звучит так, как будто вам нужно свойство пробела, например:

 .myTextClass {
    white-space: normal;
}

Обновление: И, судя по только что опубликованному вами коду, вы также, вероятно, хотите избавиться от этого word-wrap стиля.

Ответ №3:

CSS2 обладает рядом свойств, которые определяют, как размещается абзац текста:

white-space Указывает, как обрабатывается пробел внутри элемента
word-spacing Увеличивает или уменьшает интервал между словами в тексте
line-height Задает высоту строки
text-align Задает выравнивание текста по горизонтали
text-indent Определяет отступ первой строки в текстовом блоке

На самом деле по умолчанию текст переносится и разбивается на целые слова. Чтобы убедиться, что это так, вы можете установить white-space:nowrap , но я не уверен, что вам нужно это делать в вашем случае.

Поведение, которое вы описываете, скорее всего, вызвано word-wrap:break-word свойством, которое есть у вас в коде. Свойство word-wrap было изобретено Microsoft и добавлено в CSS3. Это позволяет разбивать длинные слова и переносить их на следующую строку.

Вы определили, что длинные слова можно просто разбить пополам, когда они не подходят. Удаление этого правила из style атрибута вернет вам поведение по умолчанию. Если нет, вы можете изменить правило на word-wrap:normal , чтобы быть уверенным.