/    Sign up×
Community /Pin to ProfileBookmark

Simple text-aligning question

Copy linkTweet thisAlerts:
Jan 09.2009

The best way to describe what I’m trying to do is just plop the code down:

[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Test</title>
</head>
<body>

<b>Title:</b>

<div style=”margin-left: 10px;”>
This is a really long title that goes on and on and on.
When it reaches the end of your screen, it’s going to wrap around.
I would like the behavior of this wrapping to not wrap underneath the word “Title”,
but instead align itself underneath the first word of this really long title.
</div>

</body>
</html>
[/code]

So, I’m trying to keep the word “Title:” and the actual title on the same line. Also, when the title wraps, I want it to wrap under itself and not under the word “Title:”. That isn’t what this code does and I’m fighting the urge to revert back to tables…

I’m sure this involves a style property I just can’t find. Or worse, it’s an HTML tag. That would suck.

Help appreciated.
Thanks.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@LeeUJan 09.2009 — You could try something like this:
[CODE]
<div style="margin-left: 100px;">
<h1 style="text-indent: -100px;">Title: This is a really long title that goes on and on and on.
When it reaches the end of your screen, it's going to wrap around. I would like the behavior
of this wrapping to not wrap underneath the word "Title", but instead align itself underneath
the first word of this really long title.</h1>
</div>[/CODE]
Copy linkTweet thisAlerts:
@conquesimoauthorJan 10.2009 — That's a creative solution there -- I didn't even think of using indent. I don't know if I can use it though because it will require me to know the exact width of "Title:" in pixels. And I believe that width can vary from browser to browser depending on whether or not the user has increased the size of their font through browser options. Right?

Would it be alright to use a 2-cell table here instead?
Copy linkTweet thisAlerts:
@TheTeenScripterJan 10.2009 — you can set the definitive size of the font, using the CSS style font-size:##pt. The actual size in pixels may only vary by up to a few pixels.
Copy linkTweet thisAlerts:
@CharlesJan 10.2009 — Better to use EMs. It still won't be exact but it will be close across fonts and will scale.

But if you're a real control freak:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p style="text-indent:-4em; margin-left:4em"&gt;&lt;span style="display:inline-block; text-align:right; width:4em"&gt;Title: &lt;/span&gt;Lorem ipsum dolor sit amet consectetuer consequat cursus orci mauris Pellentesque. Pede enim tristique risus massa lacus Aenean id pellentesque metus parturient. Lacinia tincidunt habitant sem id metus fringilla eleifend eros quis laoreet. *** consequat Nam nulla dui pede leo Fusce sem scelerisque Vivamus. Lobortis ac habitant vitae urna tellus consequat metus ligula consequat ut. &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @conquesimo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...