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>

これはすべてこれらの2つの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タグでラップしているので、単一のタグに対してデータが長すぎると予想しない限り、単語の区切りは無意味です。段落は自動的に改行されます。

<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 に答える