字母汉字可以换行标点符号不能换行_html/css

回复讨论(解决方案)

首頁

web前端

html教學

字母汉字可以换行标点符号不能换行_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:00 AM

如图

部分代码如下：

<div class="chatBox">				<div class="chatPicLeft">					<img  src="/static/imghw/default1.png"  data-src="../static/app/images/alice.png"  class="lazy"     style="max-width:90%"/ alt="字母汉字可以换行 标点符号不能换行_html/css_WEB-ITnose" >				</div>				<div class="chatContentLeft">					<div class="chatBoxLeft">						<span class="textClass">hello.你好呀!标点不会自动换行标点不会自动换行标点不会自动换行。。。。。。。。。。。。。。。。。。。。。。。。</span>					</div>				</div>			</div>						<div class="chatBox">				<div class="chatPicRight">					<img  src="/static/imghw/default1.png"  data-src="../static/app/images/alice.png"  class="lazy"     style="max-width:90%"/ alt="字母汉字可以换行 标点符号不能换行_html/css_WEB-ITnose" >				</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/imghw/default1.png"  data-src="../static/app/images/alice.png"  class="lazy"     style="max-width:90%"/ alt="字母汉字可以换行 标点符号不能换行_html/css_WEB-ITnose" >				</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

熱AI工具

熱工具

熱門話題

Java教學

1656

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1229

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。