目次
ディスカッションへの返信 (解決策)
ホームページ ウェブフロントエンド htmlチュートリアル 文字と漢字は折り返すことができますが、句読点は折り返すことができません_html/css_WEB-ITnose

文字と漢字は折り返すことができますが、句読点は折り返すことができません_html/css_WEB-ITnose

Jun 21, 2016 am 09:00 AM


図に示すように

コードの一部は次のとおりです:

<div class="chatBox">				<div class="chatPicLeft">					<img src="../static/app/images/alice.png" style="height:100%;width:100%"/>				</div>				<div class="chatContentLeft">					<div class="chatBoxLeft">						<span class="textClass">hello.你好呀!标点不会自动换行标点不会自动换行标点不会自动换行。。。。。。。。。。。。。。。。。。。。。。。。</span>					</div>				</div>			</div>						<div class="chatBox">				<div class="chatPicRight">					<img src="../static/app/images/alice.png" style="height:100%;width:100%"/>				</div>				<div class="chatContentRight">					<div class="chatBoxRight">						<span  class="textClass">hello</span>					</div>				</div>			</div>						<div class="chatBox">				<div class="chatTime"><span>12:30</span></div>			</div>						<div class="chatBox">				<div class="chatPicLeft">					<img src="../static/app/images/alice.png" style="height:100%;width:100%"/>				</div>				<div class="chatContentLeft">					<div class="chatBoxLeft">						<span class="textClass">标点不会自动换行标点不会自动换行标点不会自动换行标点不会自动换行标点不会自动换行标点不会自动换行hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</span>					</div>				</div>			</div>		</div>
ログイン後にコピー


.chatBox{	padding:1rem 1rem 0rem 1rem;	position:relative;}.chatPicLeft{	height:2.5rem;	width:2.5rem;	float:left;	position:absolute;}.chatContentLeft{	margin-left:3.5rem;	margin-right:4.5rem;}.chatPicRight{	height:2.5rem;	width:2.5rem;	right:1rem;	float:right;}.chatContentRight{	text-align:right;	margin-left:4.5rem;	margin-right:3.5rem;}.chatTime{	text-align:center;}.input{	position:fixed;	bottom:0;	z-index:9999;	height:3rem;	width:100%;	background-color:gray;}.textClass{	word-break:break-all;}.chatBoxLeft{	display:inline-block;	padding:0.5rem;	background-color:#ffffff;	-webkit-border-radius:0.3rem;	-moz-border-radius:0.3rem;	-o-border-radius:0.3rem;	border-radius:0.3rem;}.chatBoxRight{	display:inline-block;	padding:0.5rem;	background-color:#ffffff;	-webkit-border-radius:0.3rem;	-moz-border-radius:0.3rem;	-o-border-radius:0.3rem;	border-radius:0.3rem;}
ログイン後にコピー


ディスカッションへの返信 (解決策)

.textClass{	word-break: break-all;	word-wrap: break-word;}
ログイン後にコピー

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? Mar 12, 2025 pm 04:08 PM

HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素?

See all articles