文字と漢字は折り返すことができますが、句読点は折り返すことができません_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 までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック
Gmailメールのログイン入り口はどこですか?
7296
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1206
29



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

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

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

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