4

мне кажется что для этого использовать js лишнее

var container = document.querySelector("article p");
var arr = container.innerHTML.split(/\s+/);
var str = '';

for (var i = 0; i < arr.length; i++) {
  if (arr[i]) {
    arr[i] = '<span>' + arr[i] + '</span>';
  }
}

container.innerHTML = arr.join(' ');
* {
  margin: 0;
  padding: 0;
}
article {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid red;
  transform: rotate(0deg);
  margin-left: 300px;
}
article span {
  display: block;
  color: red;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'Lobster', cursive;
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<article>
  <p>
    t e x t - r o t a t i o n
  </p>
</article>

18
  • 2
    обернуть все буквы в span jsfiddle.net/soledar10/xfp7akox
    – soledar10
    14 окт 2016 в 9:27
  • так как у css нет доступа к конкретному символу - без оборачивания каждого символа в отдельный элемент, типа спана, это невозможно. Именно это и делается в js
    – Grundy
    14 окт 2016 в 9:27
  • Посмотрите здесь
    – Andrew B
    14 окт 2016 в 9:27
  • @soledar10 я так и сделал в js - я так умею , js здесь мне подсказали
    – user33274
    14 окт 2016 в 9:33
  • @Grundy если не ошибаюсь то код js ваш , спасибо он мне частенько пригождается - так и реализовал - что бы не захломлять span разметку
    – user33274
    14 окт 2016 в 9:34

5 ответов 5

9

Варианты:

.p-1 {
  width:1px;
  -ms-word-break:   break-all;
 
  word-break:       break-word;
  word-wrap:        break-word;
}

.p-2 {
  -ms-writing-mode: tb-rl; /* old syntax. IE */
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl; /* new syntax */
			
-webkit-text-orientation: upright;
   -moz-text-orientation: upright;
    -ms-text-orientation: upright;
        text-orientation: upright;
  
  /* min-height: 500px; */
}


.p-0 i {
  font-style: normal;
  display: block;
}
  Вариант 1:  
  <p class="p-1">
    t e x t - r o t a t i o n
  </p>


  Вариант 2:
  <p class="p-2">
    t e x t - r o t a t i o n
  </p>
  
 Вариант 3:   
 <p class="p-0">
   <i>t</i>
   <i>e</i>
   <i>x</i>
   <i>t</i>
   <i><br></i>
   <i>r</i>
   <i>o</i>
   <i>t</i>
   <i>a</i>
   <i>t</i>
   <i>e</i>
 </p>

Больше тут

15
  • 1
    Леночка когда здесь как на тостере сделают несколько вариантов выбора правильного ответа ?
    – user33274
    14 окт 2016 в 10:30
  • 4
    @Geyan боюсь, что не сделают. Все правильные ответы типично получают свою дозу голосов, а галочкой автор отмечает ответ, которым в конечном итоге воспользовался. А если скомбинировал несколько, то это может быть достойно отдельного собственного ответа с галочкой. Если хотите кому-то выдать дополнительный пряник, откройте конкурс, например (мин. 50 репутации на награду). Только имейте в виду, что если захотите выдать несколько наград, каждая следующая должна быть больше предыдущей. Не разоритесь :Р
    – user181100
    14 окт 2016 в 10:33
  • @Geyan, у Qwertiy отличный ответ, так что все в порядке)
    – SVE
    14 окт 2016 в 10:34
  • @Geyan, правильный ответ - тот, который помог лично вам.
    – Nofate
    14 окт 2016 в 10:37
  • 1
    И такой вопрос "когда здесь как на тостере сделают несколько вариантов выбора правильного ответа " думаю как раз можно на мете задать.
    – SVE
    14 окт 2016 в 10:41
7

Можно попробовать что-то такое:

article {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid red;
  margin-left: 300px;
  color: red;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'Lobster', cursive;
  width: .75em;
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<article>
  t e x t - r o t a t i o n
</article>

или такое

article {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid red;
  margin-left: 300px;
  color: red;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'Lobster', cursive;
  width: .75em;
  word-break: break-word;
  word-wrap: break-word;
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<article>
  text-rotation
</article>

3
  • ну ты б хоть написал, что из-за пробелов, когда ширина контейнера маленькая - браузер сам перенесет
    – Grundy
    14 окт 2016 в 10:05
  • @Grundy, можно и без пробелов перенести.
    – Qwertiy
    14 окт 2016 в 10:06
  • @Grundy, добавил вариант без пробелов.
    – Qwertiy
    14 окт 2016 в 10:07
7

Пример с writing-mode. Возможно, вам подойдет. Также есть вариант с word-break здесь.

.my-text {
  writing-mode: vertical-rl;
}
.my-text2 {
  line-height: 1;
  word-break: break-all;
  width: 1px;
  font-size: 16px;
}
<p>
  Обычный текст
</p>
<p class="my-text">
  Текст по вертикали
</p>
<p>
  Обычный текст
</p>
<p class="my-text2">
  Странный текст
</p>

3
  • а буковки ? в примере видите как сделано , я и хотел без span перевернуть , в моём случае на js обёрнуты быквы в span
    – user33274
    14 окт 2016 в 9:38
  • @Geyan я восстановил ответ, чтобы его изменить.
    – Andrew B
    14 окт 2016 в 9:40
  • вы не поняли меня наверно ! буквы повернуты - а надо в нормальном отображении , как положено - в вашем примере повёрнуты буквы
    – user33274
    14 окт 2016 в 9:42
3

Есть вот такая штука writing-mode она поворачивает текст или вот тут

2
  • в сафари проблема с mode
    – user33274
    14 окт 2016 в 9:35
  • сами буковки тоже надо повернуть - потому этот вариант не айс
    – user33274
    14 окт 2016 в 9:40
2

Если делать оборачивание каждого символа в span, то правильно его делать так:

var container = document.querySelector("div");

container.innerHTML = container.textContent.replace(/\s+|./g, function (m) {
  return '<span>' + ({'<': '&lt;', '&': '&amp;'}[m] || m) + '</span>';
});
span { background: silver; }
span:nth-child(even) { background: antiquewhite; }
<div>Cras ultricies ligula    sed magna &lt; dictum && porta</div>

В отличие от css'ного варианта, тут можно устроить центрирование символов:

var container = document.querySelector('article');

container.innerHTML = container.textContent.replace(/\s+|./g, function (m) {
  return '<span>' + ({'<': '&lt;', '&': '&amp;'}[m] || m) + '</span>';
});
article {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid red;
  margin-left: 300px;
  color: red;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'Lobster', cursive;
  text-align: center;
}

span {
  display: block;
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<article>
  text-rotation
</article>

2
  • тогда уж лучше через appendChild все собрать чтобы не смотреть на эти экранирования :-)
    – Grundy
    14 окт 2016 в 10:24
  • я запутался, блин вариантов накидали - я обалдел - как все варианты выбрать ? как на тостере
    – user33274
    14 окт 2016 в 10:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.