主页 / 问题 / 672180
Accepted
kizoso
Asked:2020-05-29 14:46:29 +0000 UTC2020-05-29 14:46:29 +0000 UTC

响应式文本旋转

  • 772

您需要使自适应块的标题旋转。问题在于块是自适应的，宽度相对于屏幕变化，高度可以任意不同，具体取决于内部内容。转弯的时候需要考虑转弯时方块会移动什么宽度和高度，结果却不一样。文字移出，因为宽度变成高度，高度变成宽度。帮助我理解。

如何保持文本的比例？添加另一个包装器并反转？有可能只有css吗？

期望的结果，标题（红色）应该居中，垂直和水平：

在此处输入图像描述

现在像这样：

在此处输入图像描述

代码示例：

.block{
  position:relative;
  padding-left:5rem;
  margin:0 auto;
  width:50%;
}
.pin{
  position:absolute;
  display:block;
  top:0;
  left:0;
  bottom:0;
  width:3rem;
  height:100%;
  background:rgba(221, 221, 221, 0.5);
}
.pin span{
  position:absolute;
  display:inline-block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  vertical-align:bottom;
  text-align:center;
  transform:rotate(-90deg);
  background:rgba(221, 221, 221, 0.5);
  color:red;
}
<div class="block">
  <div class="pin"><span>Заголовок</span></div>
  
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
</div>

html

3 个回答

  1. Best Answer

    writing-mode: vertical-lr我们将+用于这些目的transform: rotate(180deg)。我们将使用 flexbox 将题词居中。

    .block {
  position: relative;
  padding-left: 5rem;
  margin: 0 auto;
  width: 50%;
}
.pin {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 100%;
  background: rgba(221, 221, 221, 0.5);
  writing-mode: vertical-lr;
  display: flex;
}
.pin span {
  margin: auto;
  transform: rotate(180deg);
}
    <section class="block">
  <h1 class="pin"><span>Заголовок</span></h1>
  
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
</section>

    编辑：由于这个问题很受欢迎，而且代码被清楚地复制了，我决定更正标记。

    • 7

  2. 这就是它的工作原理，但前提是文本在一行上，没有连字符。

    .block {
  margin: 0 auto;
  padding-left: 5rem;
  position: relative;
  width: 50%;
}

.pin {
  background: rgba(221, 221, 221, 0.5);
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 3rem;
}

.pin span {
  bottom: 50%;
  color: red;
  display: inline-block;
  left: -500px;
  position: absolute;
  right: -500px;
  text-align: center;
  transform-origin: center center 0;
  transform: rotate(-90deg);
  white-space:nowrap;
}
    <div class="block">
  <div class="pin"><span>Заголовок</span></div>

  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
</div>

    或者查看 jsfiddle 上的代码

    • 4

  3. 就像...没有任何困难

    *{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.r{
width:50px;
height:100%;
background:#ccc;
text-align:center;
line-height:50px;
-webkit-writing-mode: vertical-rl;
writing-mode:tb-rl;
 font: Consolas, Monaco, monospace;
}
.r span{
display:inline-block;
transform:rotate(-90deg);
font-size:30px;
height:4vh;
color:#fff;
}
@media screen and (max-height:520px){
.r span{
	display:inline-block;
	height:6vh;
}
}
    <div class="r">
	<span>п</span>
	<span>р</span>
	<span>и</span>
	<span>м</span>
	<span>е</span>
	<span>р</span>
</div>

    • 0

相关问题