Question

在HTML中，我有两列。在右边是一个大数字，在左边，是文本。当我调整底部窗口的大小时，我不希望右边的数字消失，我希望左边的文本（p类参数）在与右边的div（p类数据）接触时换行。

body {
                    margin: 0;
                    padding: 0;
                    font-family: Roboto;
                    font-size: .75em;
                    font-weight: lighter;
                }

            ul {
                margin: 0;
                padding: 0;
                list-style: none;
                border-bottom: 1px solid #cccccc;
            }
            .group {
                width: 100%;
                margin-bottom: 20px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            .group h2 {
                display: block;
                font-size: 14px;
                background: gray;
                padding: 5px;
            }
            .group li {
                clear: both;
            }
            .group p {
                padding: 3%;
                text-align: center;
                font-size: 14px;
            }
            .group2 ul {
                display: table;
                width: 100%;
            }
            .group2 li {
                display: table-row;
            }
            .group2 p {
                display: table-cell;
                vertical-align: middle;
                width: 46%;
                border-bottom: 1px solid #cccccc;
            }
            .group li:last-child p {
                border-bottom: 0;
            }

            p.parameter {
                text-align: left;
                text-wrap: normal;
                word-wrap: break-word;
            }

            p.data {
                text-align: right;
            }

    <div class="group group2">
            <ul>
                <li>
                    <p class="parameter">
                        GGPawdawdwawdawdawdawdawdwadawdawadawdawdaw<br>
                        sdadawdawdawdawda<br>
                        dawwdawawdawdawd<br>
                        dawaawdawdwaddsd<br>
                        dawawddawd
                    </p>
                    <p class="data">
                        265,265,265,265,265,265,265,265.00<br>
                    </p>
                </li>
                <li>
                    <p class="parameter">
                        GGP<br>
                        sda<br>
                        dawd<br>
                        dawdsd<br>
                        dawdawd
                    </p>
                    <p class="data">
                        265<br>
                        wadw<br>
                        awdaw
                    </p>
                </li>
                <li>
                    <p class="parameter">
                        GGP<br>
                        sda<br>
                        dawd<br>
                        dawdsd<br>
                        dawdawd
                    </p>
                    <p class="data">
                        265<br>
                        wadw<br>
                        awdaw
                    </p>
                </li>
            </ul>
        </div>

Answer 1

在您的代码中使用它：

whitespace:pre-line。

Answer 2

这是一个小提琴：http://jsfiddle.net/4DhvS/2/

和第二个：http://jsfiddle.net/4DhvS/3/

第一个：

ul .parameters {
    word-break: nowrap;
}
ul .data{
    word-break: break-all;
}

第二个：

ul .data{
    word-break: break-all;
}

调整大小时，将div内的文本换行到多行

2 个答案: