Как я могу повернуть как текст, так и его контейнер?

Я сейчас в проекте, где я хотел бы повернуть текст в контейнере, где края текста должны совпадать с краями контейнера.Как я могу повернуть как текст, так и его контейнер?

Если я поворачиваю его обычно это приведет к следующему: http://jsfiddle.net/lumio/a3Z4C/
Как вы можете видеть, текст вытекает из контейнера, но я хочу, чтобы он в ней.
Так что не полный текст должен быть повернут, а линии, которые затем должны быть выровнены с контейнером.

Кто-нибудь знает решение с CSS или JS?

С наилучшими пожеланиями

источник

2012-02-28 lumio

Разве это не достаточно просто поставить некоторые обивка на контейнер? http://jsfiddle.net/a3Z4C/4/ Или вы хотите, чтобы строка возвращалась, исходя из края окна? –

Почему бы просто не поставить трансформацию на контейнер? http://jsfiddle.net/XWHsC/ – j08691

@JamesMontagne: да ... строки должны основываться на краю окна :) – lumio

Если вы добавляете в некотором дополнении в контейнере DIV текст течет красиво внутри коробки. Я добавил по крайней мере 10px к вашему примеру jsFiddle, и текст находится прямо внутри контейнера. Howerver, это может выглядеть лучше, чтобы добавить немного больше дополнения, как следующее:

.container { 
    width: 300px; 
    background: silver; 
    margin: 20px; 
    padding: 10px; 
}

источник

2012-02-28 15:42:16 ItsMIllerTime65

Спасибо за ваш ответ, но что, если у вас есть еще 3 абзаца? ;) это решение не сработает – lumio

Очень верно ... :) – ItsMIllerTime65

Вы динамически вычисляя вращение? Если это так, вы можете захотеть динамически добавить некоторые дополнения в контейнер. Не уверен, что точный алгоритм будет, но это будет что-то вроде P = (D * N)

P = набивка, D = градусы, N = магическое число, чтобы заставить все это работать :)

источник

2012-02-28 15:42:59 Matt

ты смешной: D, но N будет числом строк, но я не знаю, как вычислить это число с помощью JS: D В любом случае ... может быть, что-то «лучше» – lumio

@Lumio: Number of lines = (Высота пикселя контейнера/высота пикселя используемого шрифта). Я понимаю, что мы получаем множество жестко кодированных значений, но я думаю, что это доказательство концепции. – Matt

да ... Я тоже думал о линиях ... так что N = линия-высота - или должен N быть эгалом до 42? : D В любом случае ... проблема будет другая ... полный текст будет повернут, но не строки – lumio

Хорошо, что есть один вариант. Вы можете поместить контейнер внутрь другого контейнера. Поэтому независимо от того, что вы положили внутри этого контейнера т всегда будет держать внутри родительского

/jsfiddle.net/smitdesai/dsvUS/

источник

2014-03-11 08:18:00 user3405120

Как я могу повернуть как текст, так и его контейнер?

ответ

Смежные вопросы