SYNCERのロゴ
アイキャッチ画像

URLなど半角英数の途中で強制的に折り返す方法

長いurlなど、半角文字列が続くと行末で折り返されず、デザインを崩してしまうことがあります。word-break: break-allを指定すれば、強制的に折り返すようになります。

サンプルコード

div {
	word-break: break-all ;
}

デモ

word-break: break-all

半角文字列の途中でも、行末で強制的に折り返します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	word-break: break-all ;
	border: 1px solid #000 ;
	width: 80% ;
}
	</style>
</head>
<body>
	<div>https://www.google.co.jp/#q=SYNCER%E3%81%AF%E6%82%AA%E3%81%8F%E3%81%AA%E3%81%84%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%82%E3%81%97%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93</div>
</body>
</html>

デフォルト

行末で折り返されず、はみ出してしまいます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	border: 1px solid #000 ;
	width: 80% ;
}
	</style>
</head>
<body>
	<div>https://www.google.co.jp/#q=SYNCER%E3%81%AF%E6%82%AA%E3%81%8F%E3%81%AA%E3%81%84%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%82%E3%81%97%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93</div>
</body>
</html>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。