Стиль Div не применяется при использовании getelementbyid

Я хочу нажать массив чисел в div. Я знаю, что массив будет длинным, поэтому я хочу максимальную ширину, чтобы числа продолжались до следующей строки. У меня есть пример кода here , и, как вы можете видеть, максимальная ширина, похоже, не применяется к цифрам - они просто продолжают работать на одной строке. Как мне получить ширину внутри класса для применения к номерам?Стиль Div не применяется при использовании getelementbyid

CSS:

.divstyle { 
    background-color:orange; 
    height:125px; 
    width: 75px; 
}

HTML:

<div class="divstyle"> 
<div id="test"></div> 
</div>

Javascript:

var number = Math.floor(Math.random()*99+1); 
var num = []; 
for (var i = 0; i < 30; i++) { 
    var number = Math.floor(Math.random()*100+1); 
    num.push(number); 
} 
document.getElementById("test").innerHTML = num;

Я держу пари, что я делаю простую ошибку, но я не знаком с CSS, вот и все.

источник

2014-07-21 Lillz

Я не думаю, что вы можете просто написать весь объект, который я s "num" так. Вы должны сказать, какой элемент: num [0]. Почему вы нажимаете число на массив, чтобы начать? – durbnpoisn

Добавить это стиль вашего Div в:

word-wrap: break-word;

Если вы хотите, чтобы номера не должны превышать высоту DIV, добавить это стиль вашего Div слишком (поддерживает заданную высоту с помощью скроллинга):

overflow: auto;

... Или добавьте оба эти (регулирует высоту по размеру содержимого):

height: auto; 
min-height: 125px;

http://jsbin.com/vuvih/5/edit

Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

Свойство word-wrap CSS используется для определения того, может ли браузер разрывать строки в пределах слов, чтобы предотвратить переполнение (другими словами, сила оборачивания), когда в противном случае нерушимая строка слишком длинная, чтобы поместиться в ее коробке.

источник

2014-07-21 19:52:28 jtheletter

Или 'height: auto;' и 'min-height: 125px;' –

Хороший призыв к комбинированным 'auto' и' min'' height' (убедитесь, что в этой стратегии также поддерживается 'word-wrap') ! – jtheletter

А это отлично работает, спасибо – Lillz

Что происходит, ваш контент считается одним словом. Между чем нет пробелов.

Вы должны указать

word-wrap: break-word;

для того, чтобы заставить нарушение слов.

Вот редактирование вашего JSFiddle: http://jsfiddle.net/hy9Cb/2/

Здесь вы можете найти все другое значение слова-брейк: http://www.w3schools.com/cssref/css3_pr_word-break.asp

источник

2014-07-21 19:55:43 Maxetime

Это потому, что CSS «думать», что это только одно слово, и не сломать линию.

Вы должны использовать

document.getElementById("test").innerHTML = num.join(', ');

Таким образом, вы будете иметь чисел, разделенных запятой и пробелом

источник

2014-07-21 19:55:43 thiagonobre

Отличный способ! +1 –

Вы хотите добавить word-wrap: break-word; в свой CSS, и гарантировать, что не переполнить окно можно использовать overflow: scroll;

Проверьте это здесь: http://codepen.io/anon/pen/lmosb

источник

2014-07-21 19:58:28

Стиль Div не применяется при использовании getelementbyid

ответ

Смежные вопросы