2016-06-23 20 views
-1

div内のテキストを折り返すには、CSSを使用しています。私は白いスペース、単語区切りを適用しましたが、何も起こりませんでした。divの周りにテキストを折り返す方法

リンクhttp://fiduciaryconsulting.org/index.php/services/90-services/200-demo

Screenshot of section with issue

+1

は、スタックオーバーフローへようこそ!具体的な問題を明確にしたり、詳細を追加して必要なものを正確に強調してください。現在書かれているとおり、あなたが求めていることを正確に伝えるのは難しいです。 –

+1

[ask]をお読みください。コード支援を求めるときは、[mcve]を質問に入れる必要があります。 – j08691

+0

ようこそスタックオーバーフロー!コードヘルプを求める質問には、質問自体に** **それを再現するのに必要な最短のコードを含める必要があります**。あなたは[**サンプルまたはサイトへのリンク**]を提供していますが(http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –

答えて

2

セレクタ.boxes li aからwhite-space: nowrapを削除し、それが

+0

なぜdownvote? –

+0

ありがとうクライド、私は空白のプロパティを削除し、テキストがうまく包まれましたが、いくつかのボックスはもう一方よりも長くなりました。[http://fiduciaryconsulting.org/index.php/services/90-services/200-demo] – Vin

0

white-space: nowrap;はこの1つのために犯人だろう動作します。以下のCSSからそれを削除するか、以下のようにそれをコメントアウトすることができます

.boxes li a { 
    color: #fff; 
    display: block; 
    padding: 60px 10px 60px 10px; 
    text-decoration: none; 
    background-color: #3366ff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    min-height: 30px; 
    word-wrap: break-word; 
    /* white-space: nowrap; */ 
} 

あなたは、ファイル上のライン29-44にこのセレクタのCSSルールを見つけることができます。http://fiduciaryconsulting.org/templates/jsn_pixel_free/css/template.css

+0

なぜdownvote? –

+0

私はあなたにdownvoteしなかった。私はニッキーの不完全な/間違った答えを落とした。あなたはあなたの答えに肯定的なスコアを持っています。私の履歴をチェックすることもできます。あなたに下降音は与えられませんでした。 *どんな速度でも、それはなぜ重要なのでしょうか?私たちはOP * – MassDebates

+0

を助けようとしています。それはあなたのためではありませんでした。私はあなたの答えにdownvoteを見て、なぜそれが下落されたのかと尋ねました。答えが下落した理由を知ることができます。 –

2

からwhite-space: nowrap;を削除しますリンクタグ。

長い単語やURLを包むに関する詳細はこれらの記事チェックアウト:

+0

ありがとうTed、私は空白のプロパティを削除して、テキストがうまく包まれましたが、いくつかのボックスはもう一方よりも長くなりました。 – Vin

+0

ボックスの高さを等しくすることはまったく別の問題です;)これは 'display:table-cell;'を使うことができますが、複数の列に対してはJSまたは 'display:flex;'を使う必要があります。 チェックアウトするフレックスボックスのリンクは次のとおりです。 1)http://jonibologna.com/flexbox-cheatsheet/ 2)https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 3)http://codepen.io/enxaneta/full/adLPwv/ 4)http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#wraprow –

関連する問題