База-выравнивание текста в повернутом div

ProgramBox

База-выравнивание текста в повернутом div

Post author:admin
Запись опубликована:24 марта, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Вот базовый набросок того, чего я хочу достичь, но без вставки каких-либо HTML-объектов (Plunker:http://plnkr.co/edit/nt1pPUujTSLEXIAagS7d?p=preview ):

 .container {
  padding: 40px;
}
.underlined {
  border-bottom: 1px solid red;
  padding-bottom: 0;
}
.skew-text {
  transform: rotate(-45deg);
  width: 100px;
}

 <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>


  <!-- Original -->
  <div class="container">
    <div class="skew-text">
      <span>
              I'm a little teapot, short and stout
            </span>
    </div>
  </div>
  <!-- Aligned -->
  <div class="container underlined">
    <div class="skew-text">
      <span class="text">
              I'm a little amp;emsp;amp;emsp; teapot, amp;emsp;amp;emsp;short and amp;emsp;amp;emsp;amp;emsp;stout
            </span>
    </div>
  </div>
</body>

</html>

В принципе, я хотел бы, чтобы каждая строка текста в повернутом div выравнивалась по красной линии, а не по левой стороне повернутого контейнера. Возможно ли это только с помощью CSS?

1. Вы могли бы использовать translateY для перемещения повернутого текста: plnkr.co/edit/f4iagfDUUBDfbjJnjAI6?p=preview — если вы сделаете это с помощью отступа (20 пикселей), тогда текст должен касаться красной линии

2. @Pete спасибо за ответ. К сожалению, это не решает проблему, поскольку мне все равно нужно будет использовать сущности (или что-то еще) для заполнения каждой строки текста, чтобы привести ее в соответствие.

3. Ах, извините, я неправильно понял, чего вы добивались

Ответ №1:

Вы могли бы сделать строки разными элементами, это помогло бы:

 .container {
  padding: 40px;
}
.underlined {
  border-bottom: 1px solid red;
  padding-bottom: 0;
}
.skew-text {
  transform: rotate(-90deg);
  width: 100px;
}

.line {
  transform: rotate(45deg);
}

 <div class="container underlined">
    <div class="skew-text">
      <span class="text">
        <div class="line">I'm a little</div>
        <div class="line">teapot,</div>
        <div class="line">short and</div>
        <div class="line">stout</div>
      </span>
    </div>
  </div>

Обновить

Это будет очень сложно.

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

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

 var para = $('.text');

var lines = [];

para.each(function(){
    var current = $(this);
    var text = current.text();
    var words = text.split(' ');

    current.text(words[0]);
    var height = current.height();

    var lineNr = 0;
    lines.push("");
  
    for(var i = 1; i < words.length; i  ){
        current.text(current.text()   ' '   words[i]);

        if(current.height() == height){
          lines[lineNr]  = words[i]   " ";
        }
      
        if(current.height() > height){
            height = current.height();
            
            lineNr   ;
            lines.push("");
            lines[lineNr]  = words[i]   " ";
        }
    }
  
  $('.text').html("");
  
  for(var line in lines){
    var p = document.createElement('p');
    $(p).html(lines[line]);
    
    $('.text').append(p);
  }
});

 .container {
  padding: 40px;
}
.underlined {
  border-bottom: 1px solid red;
  padding-bottom: 0;
}
.skew-text {
  transform: rotate(-90deg);
  width: 100px;
  transform-origin: 50% 50%;
}

p {
  margin:0;
  padding:0;
  transform: rotate(45deg);
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container underlined">
  <div class="skew-text">
    <span class="text">
      I'm a little teapot, short and stout
    </span>
  </div>
</div>

1. Спасибо за ответ! Я рассмотрел решение, почти идентичное этому, но отказался от него именно потому, что оно включало в себя разделение текста на отдельные элементы. В идеале я хотел бы сохранить текст (который будет изменяться во время выполнения) в одном div и просто выровнять его там. Если нет способа сделать это, я, конечно, все равно приму ваш ответ.

2. @csvan Я обновил ответ, он может помочь вам в вашем решении, но показывает другую проблему, которую вам, возможно, придется решить.

Ответ №2:

Вы можете получить этот результат с помощью CSS shapes. Вы можете исключить из диапазона треугольную область, что позволит ему перемещаться так, как вы хотите.

Проблема в том, что эта функция не имеет большой поддержки. Посмотрите фрагмент в Chrome, Safari или Opera.

 .container {
  padding: 40px;
}
.shape {
  float: left;
  width: 120px;
  height: 120px;
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0% 100%, 0 0);
  shape-outside: polygon(0 0, 100% 100%, 0% 100%, 0 0%);
}
.skew-text {
  transform: rotate(-45deg);
  width: 120px;
}

 <div class="container">
  <div class="skew-text">
    <div class="shape"></div>
    <span>I'm a little teapot, short and stout</span>
  </div>
</div>

1. Это в значительной степени идеально, жаль, что, похоже, оно еще не получило широкой поддержки. Я приму ваш ответ, несмотря на это, поскольку это чистое CSS-решение, которое я искал в первую очередь.

2. Рад, что это помогло! И да, жаль, что эта возможность занимает так много времени, чтобы быть доступной.