Есть ли способ перевернуть текст на css?

413

26 ноября 2016, 18:52

мне кажется что для этого использовать 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>

Answer 1

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

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>

Answer 2

Пример с 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>

Answer 3

Варианты:

.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>

Больше тут

Answer 4

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

Answer 5

Если делать оборачивание каждого символа в 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как задать footer в React js Bootsrap?

Хочу сделать компонент реакта, который служил бы footer'ом для веб страницыВ документации по react-bootstrap нашел упоминание о футере только в связке...

371

CSS