ホームページ > 記事 > ウェブフロントエンド > CSSで改行をしないようにする方法
CSSで改行をしないようにする方法
- coldplay.xixiオリジナル
- 2021-04-15 17:25:493990ブラウズ
CSS を使用して改行なしを実現する方法では、[word-break] 属性を使用して自動改行の処理を指定し、ブラウザーが任意の位置で改行を実装できるようにします。構文は [word -break: 通常|ブレークオール|キープ] -all]。
このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。
word-break 属性は自動行折り返しの処理方法を指定します。 word-break 属性を使用すると、ブラウザに任意の位置で改行をさせることができます。
構文:
word-break: normal|break-all|keep-all;
属性値:
normal ブラウザのデフォルトの行折り返しルールを使用します。
break-all を使用すると、単語内で改行が可能になります。
keep-all は半角スペースまたはハイフンでのみ折り返すことができます。
#例:<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>
</body>
</html>レンダリング:
##関連学習の推奨事項:# CSS チュートリアル #
以上がCSSで改行をしないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで段落のインデントを設定する方法次の記事：CSSで段落のインデントを設定する方法