pタグはデフォルトで自動改行されるため、幅を設定すれば良い結果が得られます。しかし最近のプロジェクトで、ajaxを使用してデータを読み込んだ後、pタグ内のコンテンツが改行されず、レイアウトが崩れてしまいました。そこで改行スタイルを試したところ、問題は解決しましたが、根本的な原因は分かりませんでした。根本的な原因は、当時取得したデータが長い数字の連なりであり、ブラウザは数字を英単語と同様に処理するため、途中で切り詰めないことです。

まず各種の方法を示し、その後各プロパティを具体的に紹介します。

強制改行なし:

p { white-space:nowrap; }

自動改行:

p { word-wrap:break-word; }

英単語の強制改行:

p { word-break:break-all; }

注意：英単語を強制的に途中で改行させる設定では、インライン要素をブロックレベル要素に設定する必要があります。

はみ出した部分は省略記号で表示:

p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 

• white-space: 要素内の空白の処理方法を設定するプロパティです。
• normal: デフォルト。空白はブラウザによって無視されます。
• pre: 空白はブラウザによって保持されます。その動作はHTMLのpreタグと同様です。
• nowrap: テキストは改行されず、brタグに遭遇するまで同じ行に続きます。
• pre-wrap: 空白文字の並びは保持されますが、通常どおりに改行されます。
• pre-line: 空白文字の並びは結合されますが、改行は保持されます。
• inherit: white-spaceプロパティの値を親要素から継承することを規定します。

word-wrap: normal|break-word; 

• word-wrap: ブラウザが単語内で改行することを許可するかどうかを示すプロパティです。これは、文字列が長すぎて自然な改行位置が見つからない場合にオーバーフローが発生するのを防ぐためです。
• normal: 許可された改行位置でのみ改行します（ブラウザはデフォルトの処理を維持）
• break-word: 長い単語またはURLアドレスの内部で改行します

word-break: normal|break-all|keep-all;

• word-breakプロパティは、単語内での改行方法を指定するために使用します。
• normal：ブラウザのデフォルトの改行規則を使用します。
• break-all：単語内での改行を許可します
• keep-all：半角スペースまたはハイフンの位置でのみ改行できます