Question

我在页面上有一些大约300px宽的div。其中的文字是错误的换行。文本显示如下（这是一个单独的文本块，没有明确的换行符）：

| Lorem ipsum dolor sit amet,                         |
| consectetur adipiscing elit. Nunc magna enim,       |
| hendrerit vitae                                     |
| viverra non, consectetur at enim. Donec             |
| ut nisi convallis nunc pharetra tempus vel ac urna. |

希望您能看到这不是文本的显示方式。每行应尽可能靠近每个div的末尾运行。每个div中的html采用以下结构：

<div class="item">
  <h3>Lorem</h3>
  <div>
    <span>ipsum</span>
    <span class="blah">dolor sit</span>
    <span class="blahblah">amet, consectetur adipiscing (etc.)</span>
  </div>
</div>

有各种跨度和不存在的内容，但据我所知，生成的换行符和html源之间没有逻辑关系。我的意思是，每个跨度或任何东西都不会发生换行。跨度保持内联。 h3向左浮动。

这个html是由php动态生成的。我认为这一定是问题所在，因为作为测试，我复制了源代码（来自浏览器的视图源选项），将其粘贴到新的.html文件中，保存并在浏览器中查看并使用换行符等出现了我想要他们的方式。我真的不明白这是怎么回事。 php生成的源代码与我在此测试中完全相同，但是一个渲染正确而另一个没有。该文本来自MySQL数据库。这可能是一些编码问题吗？

有谁知道发生了什么事？谢谢。

编辑：请求的源代码

这是正确显示的，它是这个源代码的生成的php版本（据我所知它是完全相同的），这是不正确的。

<head>

    <style type="text/css">

            * {padding: 0;margin: 0;}
            a {text-decoration: none;}
            ul {list-style: none;}  
            body, input {font-family: Georgia;font-size: 15px;}
            body {color: #444;background-color: #d9d9d9;}

            .item {
                width: 296px;
                margin-bottom: 14px;
            }

            .item div {
                background-color: #d1d1d1;
                border: 1px solid red;
            }


            .item div span:first-child {
                margin: 0px 8px;
                font-style: italic;
            }

            .item h3 {
                font-size: 18px;
                color: #444;
                margin-left: -8px;
                font-weight: bold;
                float: left;
                line-height: 16px;
            }

    </style>

</head>

<body>

    <div id="dictionary">       

        <div class="item">
            <h3 id="w4">[ ... ]</h3>
            <div>
                <span>n</span>
                <span class="number">1.</span>
                <span class="definition">A band worn around the waist to hold clothing to one's body (usually pants), hold weapons (such as a gun or sword), or serve as a decorative piece of clothing.</span>
                <span class="number">2.</span>
                <span class="definition">A band that is used in a machine to help transfer motion or power.</span>
            </div>
        </div>

        <div class="item">
            <h3 id="w5">[ ... ]</h3>
            <div>
                <span>n</span>
                <span class="number">1.</span>
                <span class="definition">A (usually self-sustaining) chemical reaction involving the bonding of oxygen with carbon or other fuel, with the production of heat and the presence offlame or smouldering.</span>
            </div>
        </div>

        <div class="item">
            <h3 id="w6">[ ... ]</h3>
            <div>
                <span>n</span>
                <span class="number">1.</span>
                <span class="definition">A covering for the head, often in the approximate form of a cone or a cylinder closed at its top end, and sometimes having a brim and otherdecoration.</span>
            </div>
        </div>

    </div>

</body>

Answer 1

在float: left;上看到您的CSS后，可能是罪魁祸首：.item h3。

意外的换行符/文本对齐问题

编辑：请求的源代码

1 个答案: