CODEWITHSUNDEEP
htmlcss
Mario
Mario

Reputation: 3

Text-align in a span HTML

So I have predifined HTML where I align to right, center or left a text. When the text has a few word, it works perfectly like the following example:

<!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&nbsp;ALIGN&nbsp;RIGHT&nbsp;</span><br>
</div>

</body>
</html>

But when the text is more larger, I don't know why it starts moving to the left, when naturraly it should just continue to the final of the line and line break to continue on the next line.

The following is where it should line break:

<!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&nbsp;ALIGN&nbsp;RIGHT&nbsp;TEXT&nbsp;ALIGN&nbsp;RIGHT&nbsp;TEXT&nbsp;ALIGN&nbsp;RIGHT&nbsp;</span><br>
</div>

</body>
</html>

Upvotes: 0

Views: 101

Answers (1)

Quentin
Quentin

Reputation: 943097

It can't word-wrap because you told it to break between words and you only have one "word".

You used non-breaking spaces instead of normal spaces between the actual words.

Since it can't work wrap, you have one line. Since it is right-aligned, it sticks out of the element to the left.

Upvotes: 2

Related Questions