can't have text-align and width work into a html style

Question

I only want my text to be displayed with a 50px width and right align.

Sounded obvious to me to code it this way:

<div style="text-align:right;width:50px;">
  Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
</div>

The 50px width applies but its space seems to be reserved on the left instead of on the right.

I tried to include this code into another div:

<div style="text-align:center;">
  <div style="text-align:right;width:50px;">
    Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
  </div>
</div>

Makes no difference. How am I suopposed to do that?

did you check if your `myyy teeext` would actually fit inside 50px? Unless you're running a 1px font, you've got 42 chars, so they're going to be MUCH wider than 50px. — Marc B, Oct 03 '16 at 15:48
well 50 was just an example, the width is working fine. That's the align that is not behaving as expected. — A.D., Oct 03 '16 at 15:51
The container is overflowed so the text-align doesn't apply. http://stackoverflow.com/questions/3759387/text-overflow-behaviour-in-css-with-non-left-values-for-text-align — Jared, Oct 03 '16 at 16:09

Paulie_D · Answer 1 · 2016-10-03T15:59:24.147

1

Flexbox can do that

div {
  display: flex;
  margin: 1em auto;
  border: 1px solid grey;
  background: palegoldenrod;
  width: 50px;
  justify-content: flex-end;
  text-align: right;
}

<div>
  Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
</div>

edited Oct 03 '16 at 15:59

answered Oct 03 '16 at 15:48

Paulie_D

107,962
13
142
161

score -1 · Answer 2 · answered Oct 03 '16 at 15:59

At least, this works:

<table width="50" align="right">
          <tr>
              <td>
                     Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
              </td>
          </tr>
        </table>

Not sure if there is a better way?

<table width="50" align="right">
          <tr>
              <td>
                     Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
              </td>
          </tr>
        </table>

score -1 · Answer 3 · answered Oct 03 '16 at 16:06

use a css file for all your styles add this line to your html page in the head part of your html page

 <link rel="stylesheet" type="text/css" href="something.css">

then create a file called something.css and keep all your styleing in this file then give your text a class eg

<p class ="textstyle">put your text here</p>

Then in the the something.css add this

.textstyle
{text-align: right;
font-size: 50px;
}

Hope this helps macmuggins.com html code has very basic examples check it out Its highly reccomended you use this method your pages will be full of code and may load slower this is the practiced way

can't have text-align and width work into a html style

3 Answers3