Jump to content
  • 0

Выравнивание

Nomo

Asked by Nomo,

 Share

Question

Nomo Explorer

Nomo

Posted
Posted

Помогите, пожалуйста. Нужно выровнять текст по правому и левому краю одновременно. Свойство justify не подходит, т.к. нет переноса строки.

пам тарам пам пам

Нужно выровнять на ширину, к примеру, 40em. Возможно такая тема на форуме уже была, но я ничего не нашла.

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0
ZoNT Explorer

ZoNT

Posted
Posted
Tokolist, слова формируются динамически из названий разделов...

Вот они же скриптом формируются?

вот и создавайте динамически табличку с кол-вом ячеек = кол-ву слов. Все слова кроме первого и последнего позиционируйте по центру, первое - налево, последнне - направо.

Link to comment
Share on other sites
  • 0
Tokolist Explorer

Tokolist

Posted
Posted
Tokolist, слова формируются динамически из названий разделов...

можно скриптом:

1. берем содержимое заголовка

2. каждое слово в спан

3. ширина каждого спана ~= 100% / кол. слов

4. первый спан выравнивание по левому краю

5. последний спан выравнивание по правому краю

6. остальные спаны по центру

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted
Tokolist, слова формируются динамически из названий разделов...

можно скриптом:

1. берем содержимое заголовка

2. каждое слово в спан

3. ширина каждого спана ~= 100% / кол. слов

4. первый спан выравнивание по левому краю

5. последний спан выравнивание по правому краю

6. остальные спаны по центру

При ширине слова больше ширины спана оно спозиционируется налево и вылезет за спан справа.

При ширине слова больше ширины ячейки ячейка растянется а остальные - сожмуться.

Link to comment
Share on other sites
  • 0
Tokolist Explorer

Tokolist

Posted
Posted

Проверял: IE5.5+, Opera, FF2, Safari

Надо еще вылизать, но основная идея думаю понятна. 1111304227.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
* {
 margin: 0;
 padding: 0;
}

p {
 background: #f00;
 text-align: justify;
 text-align-last: justify; /* for IE >= 5.5 */
 overflow: hidden;
 height: 20px;
 font-size: 16px; /* by default */
}

p:after {
 content: " bla";
 background: #0f0;
 padding-right: 9999px;
 visibility: hidden;
}
/*]]>*/
</style>
</head>
<body>

<p>пам тарам пам пам</p>


</body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept