在旋转的div中使文本基本对齐
[英]Base-align text in a rotated div
问题描述
这是我想要实现的基本草图，但是没有插入任何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可以做到吗？
2 个解决方案
解决方案1
3 2016-10-19 08:22:24
您可以使线条不同，从而达到目的：
.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>
解决方案2
2 已采纳 2016-10-19 12:36:47
您可以使用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下方对齐文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.