这是我想要实现的基本草图，但没有插入任何类型的 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    teapot,   short and    stout
</span>
</div>
</div>
</body>
</html>基本上，我希望旋转后的 div 中的每一行文本与红线对齐，而不是旋转后容器的左侧。这可能只使用 CSS 吗？
最佳答案
你可以让这些线条成为不同的元素，这样就可以了:
.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>关于css - 旋转 div 中的基本对齐文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40125392/