内容溢出动态内容

时间:2015-08-20 08:56:14

标签: javascript dynamic overflow

我正在使用内容div来显示递归问题的结果 -

从数字1开始并重复加5或乘3,可以产生无限量的新数。你会如何写一个函数,给定一个数字,试图找到一系列这样的加法和乘法产生这个数字?例如,可以通过首先乘以3然后将两次加5来达到数字13,而数字15 根本无法达到。

我正在尝试找到解决方案,然后将其传递回reach()函数,该函数会动态填充我的内容div:

public partial class App : Application
{
    private CompositionContainer _container;

    protected override void OnStartup(StartupEventArgs e)
    {
        var path = Path.GetDirectoryName("Your destination on C:");

        var catalog = new DirectoryCatalog(path);
        _container = new CompositionContainer(catalog, CompositionOptions.DisableSilentRejection);
        _container.SatisfyImportsOnce(this);

        var resourceDictionaries = _container.GetExports<ResourceDictionary>();

        foreach (var resourceDictionary in resourceDictionaries)
        {
            Application.Current.Resources.MergedDictionaries.Clear();
            Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);
        }
    }
}

这是我的容器的css和我的内容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>

当我执行这个脚本时,我确实得到了内容 - 但它溢出了div - enter image description here

我正在尝试使用word-break:break-all;在我的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;}

但是当内容被设置为其他函数(如findTarget)的返回值时,它会中断。

我该如何解决这个问题 - 我不想使用Jquery - 只是纯粹的js解决方案

2 个答案:

答案 0 :(得分:3)

要执行此操作,只需将以下css添加到#container

即可
word-break: break-all;

这允许行在任意两个字母之间断开,参见:

http://jsfiddle.net/us8qpvm0/

答案 1 :(得分:1)

尝试添加

group_data = data.groupby('first')
group_data['third'].apply(lambda x: np.unique(np.concatenate(x)))

到CSS中的#container类。