字母汉字可以换行 标点符号不能换行 求助

[只有我能叫神仙鱼]

如图

部分代码如下：

<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;
}