Firefox-CSS Word Break: Break-All нестабильный ⇐ CSS

[Anonymous]

У меня есть Div, где часто отображается большая строка без пробелов. />
Я пытаюсь заставить его работать, как показано слева. < /p>

На Firefox (тестируется с помощью v. 33.0), большую часть времени текст отображается как слева. однако иногда (случайным образом?). Он отображается справа. Мне кажется, что поддержка разрыва слов не является последовательной на Firefox? < /P>

Вот мой код CSS. Строка отображается внутри списка: < /p>

#my_div
{
letter-spacing: 1px;
font-size: 75%;
width: 10%;
min-height: 400px;
margin-left: 2%;
margin-bottom: 0px;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20px;
padding-top: 20px;
background-color: #44EEFF;
color: #000000;
float: left;
border: 1px solid #FF0000;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
text-align: left;
display: block;
}
< /code>

есть ли кросс-браузер или Firefox, специфичный способ обернуть большие строки (без пространств) внутри Div? < /strong> < /p>

Обновление: < /strong> < /p>

Итохой код из моего CSSS File It Web-Page Al Al As. Я постараюсь разместить здесь соответствующий код и только заменить контент. < /p>

my_div находится внутри контейнера div. < /p>

Внутри этого контейнера #my_div - один из трех девственных. Ширина должна составлять 20% (#left_div), 60% (#Center_DIV), 10% (#MY_DIV). Я оставил немного места между полями. #my_div
{
letter-spacing: 1px;
font-size: 75%;
width: 10%;
min-height: 400px;
margin-left: 2%;
margin-bottom: 0px;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20px;
padding-top: 20px;
background-color: #44EEFF;
color: #000000;
float: left;
border: 1px solid #FF0000;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
text-align: left;
display: block;
}

#my_div ul, #my_div ul li
{
padding: 1%;
margin: 10px;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
}

#my_div_container
{
letter-spacing: 1px;
text-align: left;
margin: 0 auto;
background-color: #666666;
display: block;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
text-align: left;
display: block;
overflow: auto;
}

#left_div
{
letter-spacing: 1px;
text-align: left;
width: 20%;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #AAEEFF;
float: left;
display: block;
/*word-break: break-all;
word-wrap: break-word;*/
}

#center_div
{
background-color: #AAEEFF;
border: 1px solid #FF0000;
color: #FFFFFF;
font-size: 100%;
width: 60%;
margin-left: 2%;
margin-bottom: 5px;
padding-left: 1%;
padding-right: 1%;
min-height: 70vh;
display: block;
float: left;
}

#left_div_inner_div
{
color: #000000;
background-color: #AAEEFF;
font-size: 100%;
width: 100%;
left: 20px;
top: 90px;
border: 1px solid #FF0000;
padding-top: 5px;
padding-bottom: 10px;
}

#left_div_inner_div_horizontal_div
{
padding: 0;
margin: 0;
border: 0;
}

#left_div_inner_div_horizontal_div a
{
padding-left: 25px;
text-indent: 0px;
/*text-indent: 20px;*/
display: inline-block;
}

.page_background
{
font-family: Arial;
background-color: #000000;
/*width: 100%;*/
margin: 0px;
padding: 0px;
border: 0px;
min-height: 100%;
}

#my_content
{
background-color: #000000;
width: 100%;
display: block;
overflow: auto;
border: 0;
padding: 0;
margin: 0 auto;
text-align: center;
}

#my_wrapper
{
width: 100%;
border: 0px;
margin: 0px;
padding: 0px;
background-color: #000000;
}
< /code>

Вот код html < /strong> страницы: < /p>












Stack Overflow

Google




Center area

• large_string_inside_my_div_is_not_working_consistently_in_firefox

< /code>

Я пытаюсь воспроизвести ошибку, используя скрипку из Guilherme. < /p>

Подробнее здесь: https://stackoverflow.com/questions/264 ... l-unstable