Question

由于某种原因，我的div中的文字没有进入下一行，我尝试了几个不同的css元素似乎不起作用....自动换行：打破单词，只是混淆了字母...

我想要的是一个额外的词，它会下降到下一行，就像它应该

这是它在

中的div

    #top7 {
        width: 150px;
        height:auto;
        margin: 5px;
        display: block;
        float: left;
        word-wrap:break-word;
     }

它在

中的文字

#p6 {
   font-family: Myriad Pro;
   margin: 1px;  
   font-size: 22px;
   background-color:#540f45;
   padding: 5px 5px 3px 4px;
   margin:4px;
}

a {
  text-decoration: none;
  color: white;
  text-align: right;
  font-family: Myriad Pro;
}

这是从数据库中检索数据的php函数

<p id='p6'><?php echo "<a href='' "</a>"; ?></p>

这都包含在这两个id的

中

body {
   background:#603e4f;
   display: block;

}

#foursquare {
    background-color:#603e4f;    width: 290px;
    display: block;
    position: absolute;
}

Answer 1

生成的代码中没有空格，在元素之间添加一些空格（不  ）

<p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=CSC130>CSC130</a></p6><p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=MATH100>MATH100</a></p6><p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=HINF130>HINF130</a></p6><p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=HINF200>HINF200</a></p6>

Answer 2

创建一个合适的类并摆脱p6元素。显然你会使用你的数据库生成的HTML。我只是用你的价值观作为小提琴的一个例子。此外，由于您将元素包装在p标签中，所以除非您希望单个标签的数据太长，否则单词中断是没有意义的。段落会自动分解为新行。

<div id="top7">
<p class="six"><a href="#">CSC110</a></p>
<p class="six"><a href="#">MATH100</a></p>
<p class="six"><a href="#">HINF130</a></p>
<p class="six"><a href="#">CSC110</a></p>
<p class="six"><a href="#">HINF200</a></p>

</div>

.six {
font-family: Myriad Pro;
margin: 1px;  
font-size: 22px;
background-color:#540f45;
padding: 5px 5px 3px 4px;
margin:4px;

}

http://jsfiddle.net/calder12/5crqT/

Answer 3

你必须使用带有自动换行的“display：flex”。

    #top7 { 
word-wrap: break-word;
display:flex;
}

div中的文字不会转到下一行

3 个答案: