CSS Word-Wrap разрезает слова пополам

Question

CSS Word-Wrap разрезает слова пополам

0

У меня установлен элемент div

<div id="foo" class="bar"></div>

где бар

bar{word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;display:inline-block;text-align:left;}

Однако несколько слов сокращаются пополам в конце области.

Я пробовал установить свойство word-wrap в нормальное, начальное и наследование без успеха.

Неужели я неправильно понимаю функциональность переноса слов?

РЕДАКТИРОВАТЬ

используя break-word, я получаю это

EDIT Это весь css для бара.

.bar{BORDER:1px solid;height:<%=nHeight%>px;width:<%=nWidth/2%>px;max-width:<%=nWidth/2%>px; word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;background-color:#FFFFFF;cursor:default;display:inline-block;margin-top:6px;text-align:left;}

РЕДАКТИРОВАТЬ

Кажется, я запускаю css 2.1

doge 28 апр. 2014, в 10:38

Источник

0

как насчет использования свойства разрыва слова? w3schools.com/cssref/css3_pr_word-break.asp
reuelab 28 апр. 2014, в 08:09
0

@Rjonacci Это сокращает слова еще: /
Jens Bergvall 28 апр. 2014, в 08:13
1

Я думаю, что реальная проблема заключается в том, что ваш селектор CSS неправильный. Вы выбираете bar {...} который должен быть .bar {...} . Я также никогда не слышал о значении no-scroll для любого параметра переполнения.
Justus Romijn 28 апр. 2014, в 08:17
0

@JustusRomijn: D
Roko C. Buljan 28 апр. 2014, в 08:18
1

@doge jsbin.com/danuv/2/edit
Roko C. Buljan 28 апр. 2014, в 08:20
0

@JustusRomijn Спасибо за помощь, стоит ли упоминать, что этот сайт предназначен только для IE из-за интенсивного использования VBScript?
Jens Bergvall 28 апр. 2014, в 08:24
0

IE не имеет другого поведения, чем другие браузеры в этой части.
Justus Romijn 28 апр. 2014, в 08:38
0

Но я заметил использование inline-block , который, как известно, имеет некорректное поведение при рендеринге IE.
Justus Romijn 28 апр. 2014, в 08:46

Показать ещё 6 комментариев

Теги:

html

css

1 ответ

Ещё вопросы

как насчет использования свойства разрыва слова? w3schools.com/cssref/css3_pr_word-break.asp
Я думаю, что реальная проблема заключается в том, что ваш селектор CSS неправильный. Вы выбираете bar {...} который должен быть .bar {...} . Я также никогда не слышал о значении no-scroll для любого параметра переполнения.
@JustusRomijn Спасибо за помощь, стоит ли упоминать, что этот сайт предназначен только для IE из-за интенсивного использования VBScript?
IE не имеет другого поведения, чем другие браузеры в этой части.
Но я заметил использование inline-block , который, как известно, имеет некорректное поведение при рендеринге IE.

Justus Romijn · Accepted Answer · 2014-04-28T05-47-00.000Z

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

HTML:

<div id="foo" class="bar"></div>

CSS: (только соответствующие значения)

.bar {
    width: 100px;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    word-wrap: break-word;
}

Рабочая скрипка: http://jsfiddle.net/c2JPz/2/

Итак, что вы должны сделать, это изменить:

overflow-x: ~~нет прокрутки~~ hidden

display: ~~встроенный блок~~ block (или удалить это правило, потому что это стиль по умолчанию для div)