相对大小元素的分词答案

【问题标题】：Word breaking for relative size elements相对大小元素的分词
【发布时间】：2015-09-12 14:33:34
【问题描述】：

我已经非常努力地寻找解决方案，但似乎没有任何效果。位置元素中的单词不会换行，我已经尝试了所有方法，word-wrap:break-all |break-word 和当前版本。似乎没有什么可以将长线分成较小的线。 https://jsfiddle.net/k5VET/2431/

<html>
    <head>
        <title>Best Route</title>
        <style type="text/css">
        body
            {
                margin: 0;
                padding: 0;
                display: inline;
                top:0;
                right: 0;
                bottom: 0;
                left: 0;
                overflow-x: scroll;
                white-space: nowrap;
            }
        bigcontainer
        {
            vertical-align: top;
            width: 99%;
            margin-left: 0.5%;
            margin-right: 0.5%;
            background-color: #333333;
            height: 100%;
            display: inline-block;
            float: top;
        }

        map
        {
            float: left;
            height: 100%;
            width: 75%;
            background-color: green;
        }

        livelocations
        {
            float: right;
            width: 25%;
            height: 100%;
            overflow: scroll;
        }

        livelocations h1
        {
            padding: 0;
            margin: 0.5%;
            text-align: center;
            color: #edf0f5;
            width: 100%;
        }

        div.location
        {
            background-color: #637bad;
            width: 99%;
            height: 10%;
            margin: 0.5%;
            color: #edf0f5;
            margin-top: 1%;
            border-radius: 4px;
        }

        div.location button
        {
            background: white url(https://cdn1.iconfinder.com/data/icons/linecons-3/17/close-128.png) center;
            background-size: 100% 100%;
            width: 20%;
            height: 100%;
            float: right;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0 3px 3px 0;
        }

        div.location p
        {
            display: block;
            font-size: 75%;
            -webkit-hyphens: auto;
           -moz-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto;
            float: left;
            width: 80%; 
            height: 100%;
            background-color: red;
            margin: 0;
            padding: 0;
            border-radius: 3px 0 0 3px;
        }
    </style>
</head>
<body>
    <bigcontainer>
        <map></map>
        <livelocations>
            <h1>Live locations</h1>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
            <div class='location'>
                <p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
                <button></button>
            </div>
        </livelocations>
    </bigcontainer>
    <bigcontainer>
        <search><label for="autocomplete">Address</label><input placeholder="Enter address here..." id="autocomplete" type="text" size="35"></input></search>
    </bigcontainer>
</body>

【问题讨论】：

我很困惑，它看起来对我有用......有什么问题？
它们似乎对我来说包装得很好。你能澄清一下想要的效果是什么吗？ i.stack.imgur.com/WFC1o.png
你不想让它们坏掉吗？
我正在使用 Firefox，并且线条一直在 location 元素之外流动。我还在 nw.js 中测试应用程序，它也呈现相同的东西 Firefox：img42.com/QImrU

标签： html css word-wrap word-break css-hyphens

【解决方案1】：

您的body 具有white-space: nowrap;，它一直继承到p 元素...将white-space: normal; 添加到它们，它们将包装...

【讨论】：