所以我已经预先定义了HTML，其中我将文本向右、居中或向左对齐。当文本有几个单词时，它的工作原理与以下示例完全相同：
<!DOCTYPE html>
<html>
<head>
<style>@font-face {
font-family: MyFont;
src: url("file:///android_asset/printer/fonts/DroidSansMono.ttf")
}
<style>
div{
}
span{
word-wrap:break-word;
white-space: normal;
} .normal{ font-weight: normal;
}
.right{
text-align:right;
float:right;
}
.left{
text-align:left;
float:left;
}
.container{
background:red;
letter-spacing:-2.3px;
width: 372px;
font-family: MyFont;
font-size:19px;}
.center{
text-align:center;
margin:auto;
display:table;
}
</style>
</head>
<body>
<div class = container>
<span class="right">TEXT ALIGN RIGHT </span><br>
</div>
</body>
</html>但是，当文本更大时，我不知道为什么它开始向左移动，而从本质上讲，它应该继续到最后一行，然后换行，继续到下一行。
以下是它应该换行的地方：
<!DOCTYPE html>
<html>
<head>
<style>@font-face {
font-family: MyFont;
src: url("file:///android_asset/printer/fonts/DroidSansMono.ttf")
}
<style>
div{
}
span{
word-wrap:break-word;
white-space: normal;
} .normal{ font-weight: normal;
}
.right{
text-align:right;
float:right;
}
.left{
text-align:left;
float:left;
}
.container{
background:red;
letter-spacing:-2.3px;
width: 372px;
font-family: MyFont;
font-size:19px;}
.center{
text-align:center;
margin:auto;
display:table;
}
</style>
</head>
<body>
<div class = container>
<span class="right">TEXT ALIGN RIGHT TEXT ALIGN RIGHT TEXT ALIGN RIGHT </span><br>
</div>
</body>
</html>它不能换行，因为你让它在单词之间换行，而你只有一个"单词"；。
实际单词之间使用了不间断空格，而不是普通空格。
由于它不能换行，所以只有一行。由于它是右对齐的，所以它会从元素中向左突出。