取得希望分幅/行折り返し行動

Question

私は次のように可変テキストな振舞いを含む<div>を取得するために実行する必要があります。

• 幅は常に、少なくとも400ピクセルです。
• ワードはライン間で壊れませんが、ワード境界ではラインを壊すことがあります。
• divの枠線を越えてしまうことはありません。つまり、非常に長い単語などのコンテンツに対応するために幅が広がります。
• 可能な限り、幅は正確に400ピクセルです。特に短い単語の長い段落がある場合、幅は正確に400pxにする必要があります。

最も近いのはdisplay: inline-block; min-width: 400px;でしたが、短い単語の長い段落はまだ幅を伸ばしています。

Answer 1

をあなたはあなたのdivのように振る舞うようにしたいと言っていますテーブル/テーブルセル。これは、すべてあなたの定められた要件を満たす必要があります

：

.box { 
    width: 400px; 
    display: inline-table; /* table|inline-table|table-cell */ 
    word-wrap: normal; 
} 

デモ：https://jsfiddle.net/cqo9yupw/

Answer 2

テキストをDIV幅に拡大したくない場合は、代わりにmax-widthを指定する必要があります。

Answer 3

私はあなたが以下のCSSを試し勧め：

#container { 
    width:400px; 
} 


@media screen and (min-width:401px) { 

    #container { 
     width:auto; 
    } 
} 


@media screen and (max-width:399px) { 

    #container { 
     width:auto; 
    } 
} 

ID「コンテナ」とのdivがページのすべての部分をカプセル化するために使用する必要があります。この幅は400ピクセルに設定されています。ユーザーがズームインまたはズームアウトすると、幅は自動的にユーザーのウィンドウに合わせて調整されます。 @mediaセクションにある段落のIDを配置し、自動的に調整する必要があります。

例： @media画面と（最小幅：401px）{

#container { 
    width:auto; 
} 


} 


@media screen and (max-width:399px) { 

#container { 
    width:auto; 
} 

#paragraph { 
    width:auto; 
} 
} 

Answer 4

ではなく、インラインテーブルを試してみてください：

.mydiv{ 
    display:inline-table; 
    width:400px; 
    border:1px solid red; 
    word-wrap:normal; 
    word-break:keep-all; 
}