2015-08-20 5 views
0

Я использую содержимое div, чтобы показать результат рекурсивной проблемы.

. Начиная с номера 1 и повторно добавляя 5 или умножая на 3, бесконечное количество новых чисел может быть производится. Как бы вы могли написать функцию, которая, учитывая число, пытается найти последовательность таких дополнений и умножений, которые производят это число? Например, число 13 может быть достигнуто путем первого умножения на 3 и затем добавления 5 дважды, тогда как число 15 не может быть достигнуто вообще.Переполнение содержимого динамическим контентом

Я пытаюсь найти решение, а затем передать его обратно досягаемость() функцию, которая заполняет мое содержимое DIV динамически:

<script> 
function findTarget(target) { 
     function find(start,history) { 
      if (start === target) 
       return history; 
      else if (start > target) 
       return null; 
      else return ((find(start+5,"("+history+"+5)"))||(find(start*3,"("+history+"*3)"))); 
     } 
     return find(1,"1"); 
    } 
    function reach(x) { 
     var p=document.createElement('div'); 
     var result = findTarget(parseInt(x)); 
     var text = document.createTextNode(result); 
     p.appendChild(text); 
     p.setAttribute("class","limit"); 
     document.getElementById('container').appendChild(p); 
    } 
</script> 

<body onLoad="reach(prompt('Enter a target number to reach'));"> 
    <div id="container"></div> 
</body> 

Вот CSS для моего контейнера и мое содержание DIV-х

#container{ max-width:500px; margin:0 auto; width:500px; 
background-color:#63DA85; word-break:break-all; } 
.limit{ width:300px; max-width:300px; margin:auto; word-break:break-all;} 

Когда я выполнить этот сценарий, я получаю контент- но перетекает из дел - enter image description here

Я пытаюсь использовать слово-брейк: брейк-все; в моем CSS для обоих контейнеров и содержание DIV - Но это работает только, если строка контента генерируется внутри функции рич, показанной ниже

function reach(x) { 
     var p=document.createElement('div'); 
     var text = document.createTextNode("a really long string like pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp"); 
     p.appendChild(text); 
     //p.setAttribute("class","limit"); 
     document.getElementById('container').appendChild(p); 
    } 

Но это ломает, когда содержание устанавливается в качестве возвращаемого значения из какой-либо другой функции, как findTarget ,

Как мне решить эту проблему - я не хочу использовать Jquery - только чистый JS решение

ответ

3

Для этого просто добавьте следующий CSS к вашему #container

word-break: break-all; 

Это позволяет линии чтобы разрыв между любыми двумя буквами, см:

http://jsfiddle.net/us8qpvm0/

+0

Я отредактировал вопрос. Это правило css не работает, когда я динамически добавляю в div контента из возвращаемого значения функции – Prabhas

1

Попробуйте добавить

word-break: break-all; 

к вашему # контейнеру класса в CSS.

+0

Спасибо! Это работает – Prabhas

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