3

これを例に挙げてみましょう：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link type="text/css" rel="stylesheet" href="s.css">
    </head>

    <body>
        <div id="container">
            <p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>
        </div>
    </body>
</html>

CSS:

* {
    margin:0px;
    padding:0px;
}

#container {
    margin:10px;
    width:400px;
    border: 2px solid red;
}

そして、次のように表示されます。

ここに画像の説明を入力

この種のテキストを常に親 div 内に配置するにはどうすればよいですか?

4

4 に答える 4

13

を使用できますword-wrap:break-word。

#container {
    margin: 10px;
    width: 400px;
    border: 2px solid red;
    word-wrap: break-word;
}

jsFiddle の例

overflow:hiddenまたは、オーバーフローを非表示にする を使用することもできます。これは、テキストを折り返さないことを前提としています。jsFiddle の例

最後にoverflow:scroll、オーバーフローをスクロールできるようにするものがあります。注 - テキストの長さに関係なく、常にスクロールバーが表示されます。これを回避するには、 を使用することもできますoverflow:auto。私はあなたが何を望んでいるのか分かりません。jsFiddleの例overflow:scroll

于 2013-11-02T16:51:00.223 に答える
0

これは、スペースのない長い単一の単語または文字列を持つ可能性は低いです。実際のコンテンツの長さを再検討してください。あなたを使用overflow:hiddenすると、コンテナの外側の余分なテキストのみが非表示になります。それはあなたが望まないことだと思います。これほど (またはそれ以上) 長い単一の単語が本当に必要な場合は、word-wrap:break-wordorを使用する必要がありますword-break:break-word。それでも、さらに参考にするために、次の投稿を読むことができます。

word-break で自動 CSS ハイフンを使用する方法: break-all?

テーブル td で長い単語を分割する方法は?

http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

于 2013-11-02T17:14:47.653 に答える
0

警告: おそらく、あなたの望ましい動作は JoshC の回答ですが、私の回答では、(別の方法で) 親内にもテキストが保持されます。

overflow別のものを使用しますvisible(つまりauto、scrollまたはhidden)。

ほとんどの場合、次をお勧めしautoます。

#container {
    margin:10px;
    width:400px;
    border: 2px solid red;
    overflow: auto;
}

デモ

于 2013-11-02T16:52:28.623 に答える