Как переносить текст с переворачиванием на основе высоты ячейки, а не ширины? [Дубликат]

Question

Как переносить текст с переворачиванием на основе высоты ячейки, а не ширины? [Дубликат]

Я столкнулся с этой проблемой на php 7.1, который поставляется с High Sierra (OS X 10.13.5), редактирование /etc/apache2/httpd.conf со следующими изменениями помогло:

Раскомментировать эту строку
```
LoadModule php7_module libexec/apache2/libphp7.so
```

Вставить пасту в конце

<IfModule php7_module>
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps

    <IfModule dir_module>
        DirectoryIndex index.html index.php
    </IfModule>
</IfModule>

74

javascript html css html-table

задан misterManSam 23 November 2014 в 14:45

21 ответ

Я искал фактический вертикальный текст, а не повернутый текст в HTML, как показано ниже. Поэтому я мог бы достичь этого, используя следующий метод.

enter image description here [/g3] HTML: -

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS: -

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle! Демо.

Обновление: если вам нужны отображаемые пробелы, добавьте следующее свойство в ваш css.

white-space: pre;

Итак, класс css должен быть

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle! Demo With Whitespace

Обновление 2 (28-JUN-2015)

Поскольку white-space: pre;, похоже, не работает (для этого конкретного использования) в Firefox (на данный момент ), просто измените эту строку на

white-space: pre-wrap;

Итак, класс css должен быть

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

JsFiddle Demo FF Compatible.

50

ответ дан 9KSoft 20 August 2018 в 16:40

1

Я искал эту альтернативу. выглядит великолепно, но не идентифицирует пробелы. знаете ли вы об этом? – ViROscar 11 March 2015 в 16:51
2

@ViROscar Обновлен мой ответ, удачи;) – 9KSoft 12 March 2015 в 17:38
3

Хорошее обходное решение. Благодарю. – Thibault 16 April 2015 в 12:35
4

Отличный ответ, спасибо! – styopdev 10 August 2015 в 12:54
5

Невероятный. Вместо этого это должно быть отмечено зеленым цветом. Надеюсь, OP отметит это, так как он все еще активен на SO. – Rahul 5 September 2017 в 09:32

Чтобы отобразить текст в вертикальном (нижнем), мы можем просто использовать:

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

Обратите внимание, что мы можете добавить это, чтобы обеспечить совместимость браузера:

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

мы также можем узнать больше о writing-mode свойстве здесь, в документах Mozilla.

2

ответ дан Abdallah Okasha 20 August 2018 в 16:40

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

-1

ответ дан Ayyappa 20 August 2018 в 16:40

1

добавьте некоторые пояснения к вашему коду – Asieh hojatoleslami 28 July 2015 в 04:28

Попробуйте использовать SVG-файл, он, кажется, имеет лучшую совместимость с браузером и не нарушит ваши гибкие конструкции.

Я попробовал преобразование CSS и имел большие проблемы с источником transform; и в итоге появился файл SVG. Это заняло 10 минут, и я тоже мог немного контролировать его с помощью CSS.

Вы можете использовать Inkscape для создания SVG, если у вас нет Adobe Illustrator.

0

ответ дан b01 20 August 2018 в 16:40

1

SGV имеет ограниченную поддержку браузера ... – 99 Problems - Syntax ain't one 13 June 2016 в 12:24
2

какая поддержка ограничений у браузеров? caniuse.com/#search=svg – peteroak 20 January 2017 в 16:42

Я новичок в этом, это очень помогло мне. Просто измените ширину, высоту, верхнюю и левую стороны, чтобы они соответствовали:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

Вы также можете пойти здесь и посмотреть другой способ сделать это. Автор делает это так:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

71

ответ дан halfer 20 August 2018 в 16:40

1

Свойство «bottom» не имеет значения без свойства «position». – Crystal Miller 29 July 2014 в 20:17
2

Мне нужно было добавить -ms-transform: rotate (90deg); получить эту работу в IE11 – patrickbadley 5 November 2014 в 20:48
3

Спасибо, Патрик, я бы включил это свойство. – Amit 6 November 2014 в 08:24
4

согласно developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , writing-mode:tb-rl; устарел. Вместо этого используйте writing-mode:vertical-rl! – steffen 13 April 2017 в 21:52
5

transform-origin - это то, что мне нужно! – xtian 9 April 2018 в 15:48

Вы можете использовать word-wrap: break-word, чтобы получить вертикальное использование текста после snippete

HTML:

<div class='verticalText mydiv'>Here is your text</div>

css:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

0

ответ дан Hari Prasandh 20 August 2018 в 16:40

Для вертикального текста с символами один под другим в использовании firefox:

text-orientation: upright;
writing-mode: vertical-rl;

9

ответ дан Iggy 20 August 2018 в 16:40

Чтобы повернуть текст на 90 градусов:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Кроме того, похоже, что тег span нельзя поворачивать, не будучи установленным для отображения: block.

24

ответ дан Jbrown 20 August 2018 в 16:40

1

& Lt; & продолжительность GT; вероятно, должно быть с дисплеем: block; правильное вращение – Mladen Janjetovic 9 April 2013 в 14:04
2

Я применил это к & lt; div & gt; который находится внутри & lt; td & gt ;. Кажется, он успешно вращается во всех браузерах. ... ... НО, как только div поворачивается (90 градусов), td не увеличивает свою высоту. – dsdsdsdsd 28 September 2013 в 16:24

Добавить класс

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

Я использую это почти каждый день и не имел никаких проблем с ним.

https://css-tricks.com / сниппеты / CSS / текст-вращение /

2

ответ дан josliber 20 August 2018 в 16:40

Это немного хакерское, но кросс-браузерное решение, которое не требует css

<div>
    <div>h</div>
    <div>e</div>
    <div>l</div>
    <div>l</div>
    <div>o</div>
<div>

-2

ответ дан Luke Preston 20 August 2018 в 16:40

Вращение

, как и вы, - это путь, но обратите внимание, что не все браузеры поддерживают это. если вы не получите кроссбраузерное решение, вам придется генерировать фотографии для этого.

2

ответ дан Michael Irigoyen 20 August 2018 в 16:40

Попробуйте использовать:

writing-mode: lr-tb;

7

ответ дан Mladen Janjetovic 20 August 2018 в 16:40

Вот пример некоторого SVG-кода, который я использовал для получения трех строк вертикального текста в заголовке столбца таблицы. Другие углы возможны с небольшой настройкой. Я считаю, что большинство браузеров поддерживают SVG в эти дни.

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

2

ответ дан Neil Bauers 20 August 2018 в 16:40

Это также работает:

transform: rotate(90deg);

1

ответ дан Pang 20 August 2018 в 16:40

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

enter image description here [/g2]

0

ответ дан pushkin 20 August 2018 в 16:40

1

Привет, спасибо за попытку ответить на этот вопрос, можете ли вы вкратце объяснить, как ваше решение касается проблемы OP? – James Wong 19 June 2018 в 02:58

У меня есть рабочее решение с этим:

(у меня есть заголовок внутри div класса divItem)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

1

ответ дан RVA 20 August 2018 в 16:40

Может использовать свойство CSS3 Transform

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

2

ответ дан Sadee 20 August 2018 в 16:40

h1{word-break:break-all;display:block;width:40px;}

HELLO

ПРИМЕЧАНИЕ: браузер поддерживается - браузер IE (8,9,10,11) - браузер Firefox (38,39,40,41,42,43,44) - Chrome браузер (44,45,46,47,48) - браузер Safari (8,9) - браузер Opera (не поддерживается) - Android-браузер (44)

0

ответ дан Salehin 20 August 2018 в 16:40

Лучшим решением было бы использовать writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Он определяет, будут ли строки текста выложены горизонтально или вертикально, а также направление, в котором продвигаются блоки.

У этого есть хорошая поддержка браузера, но не будет работать на IE8 (если вы заботитесь об IE) http://caniuse.com/#feat=css-writing-mode

1

ответ дан Vasil Enchev 20 August 2018 в 16:40

71

ответ дан halfer 31 October 2018 в 12:37

Другие вопросы по тегам:

javascript html css html-table

Похожие вопросы:

Я искал эту альтернативу. выглядит великолепно, но не идентифицирует пробелы. знаете ли вы об этом? — ViROscar, 11 March 2015 в 16:51
Хорошее обходное решение. Благодарю. — Thibault, 16 April 2015 в 12:35
Невероятный. Вместо этого это должно быть отмечено зеленым цветом. Надеюсь, OP отметит это, так как он все еще активен на SO. — Rahul, 5 September 2017 в 09:32
добавьте некоторые пояснения к вашему коду — Asieh hojatoleslami, 28 July 2015 в 04:28
SGV имеет ограниченную поддержку браузера ... — 99 Problems - Syntax ain't one, 13 June 2016 в 12:24
какая поддержка ограничений у браузеров? caniuse.com/#search=svg — peteroak, 20 January 2017 в 16:42
Свойство «bottom» не имеет значения без свойства «position». — Crystal Miller, 29 July 2014 в 20:17
Мне нужно было добавить -ms-transform: rotate (90deg); получить эту работу в IE11 — patrickbadley, 5 November 2014 в 20:48
Спасибо, Патрик, я бы включил это свойство. — Amit, 6 November 2014 в 08:24
согласно developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , writing-mode:tb-rl; устарел. Вместо этого используйте writing-mode:vertical-rl! — steffen, 13 April 2017 в 21:52
& Lt; & продолжительность GT; вероятно, должно быть с дисплеем: block; правильное вращение — Mladen Janjetovic, 9 April 2013 в 14:04
Я применил это к & lt; div & gt; который находится внутри & lt; td & gt ;. Кажется, он успешно вращается во всех браузерах. ... ... НО, как только div поворачивается (90 градусов), td не увеличивает свою высоту. — dsdsdsdsd, 28 September 2013 в 16:24
Привет, спасибо за попытку ответить на этот вопрос, можете ли вы вкратце объяснить, как ваше решение касается проблемы OP? — James Wong, 19 June 2018 в 02:58

score 77 · Accepted Answer

Альтернативный подход: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

77

ответ дан swan 20 August 2018 в 16:40

1

Я смог найти это: generatedcontent.org/post/45384206019/writing-modes . Хотя он чувствует себя настолько взломанным. – Crystal Miller 29 July 2014 в 20:49
2

Кажется, он работает в текущих браузерах - caniuse.com/#search=writing-mode – jave.web 18 December 2015 в 13:36
3

@CrystalMiller и BTW, w3schools могут быть хорошим помощником, но это не исходная / оригинальная документация (так что это может пропустить некоторые вещи), «официальный», является w3.org или ближайшим, более понятным для человека, к нему - сеть разработчиков mozilla - «MDN». - developer.mozilla.org – jave.web 1 September 2016 в 21:36
4

Он работает в Chrome, Mozilla и IE, но не в сафари для окон. – kushalvm 21 September 2016 в 10:48
5

tb-rl устарел, используйте вместо этого vertical-rl. – Jared Chu 11 July 2018 в 09:15