Question

这是我想要实现的基本草图，但没有插入任何类型的HTML权限（Plunker：http://plnkr.co/edit/nt1pPUujTSLEXIAagS7d?p=preview）：

＆＃13;

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

＆＃13;

<!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 &emsp;&emsp; teapot, &emsp;&emsp;short and &emsp;&emsp;&emsp;stout
            </span>
    </div>
  </div>
</body>

</html>

＆＃13;

基本上，我希望旋转div中的每一行文本与红线对齐，而不是与旋转容器的左侧对齐。这只能使用CSS吗？

Answer 1

你可以使线条成为不同的元素，这样做可以解决问题：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

这将非常困难。

我创建了一个函数，如果通过检查元素的高度变化，如果我们逐个追加单词，但是如果字符串的长度不是＆与我们开始时一样，它看起来不会很漂亮。你会想要找到一些东西来解决这个问题。

它确实为底部的文本创建了一个基线，但是现在文本的高度是不可预测的。

＆＃13;

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);
  }
});

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用CSS形状获得此结果。您可以从三角形区域排除，使其按照您的意愿流动。

问题是此功能没有太多支持。请参阅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>

旋转div

2 个答案: