4

出于某种原因，我的 div 中的文本没有转到下一行，我尝试了几种不同的 CSS 元素，这些元素似乎不起作用.... word-wrap:break word，只是混淆了字母...

我想要的是一个有一个额外的词它会像它应该的那样下降到下一行

这是它所在的 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;
}
4

3 回答 3

2

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

<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>
于 2012-10-29T04:55:42.603 回答
2

您必须将“display:flex”与自动换行一起使用。

#top7 { 
  word-wrap: break-word;
  display:flex;
}
于 2018-06-13T13:12:17.017 回答
1

创建一个适当的类并摆脱 p6 元素。显然你会使用你的数据库生成的 HTML。我只是用你的价值观作为小提琴的例子。此外，由于您无论如何都将元素包装在 ap 标签中，因此除非您希望数据对于单个标签而言太长，否则 break 是毫无意义的。段落自动换行。

<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/

于 2012-10-29T04:57:43.843 回答