我想用CSS重现以下图像:
对我来说特别重要的是两条线的长度相等:
我尝试使用此代码重新创建它(jFiddle):
.box { font-family: "Open Sans"; line-height: 28px; font-weight: 700; background-color: #2c343c; margin: 20px; padding: 20px; width: 150px; text-align: justify; } .box .name { color: #fff; font-size: 24px; } .box .sub { color: #f29400; font-size: 15px; letter-spacing: 1px; }
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <div class="box"> <span class="name">Dr. Nielsen</span><br> <span class="sub">WEBDEVELOPER </div>
但它并不完美:
有没有一种很好的方法如何使用CSS实现这一点,以便两条线在任何设备上获得相同的长度.或者是否建议为此使用图片?
解决方法
你可以试试text-align-last:justify;
此外,为了避免设置宽度,您可以将框变成一个块,通过display:table;缩小其内容. .你也可以避免< br>将跨度设置为块
.box { font-family: "Open Sans"; line-height: 28px; font-weight: 700; background-color: #2c343c; margin: 20px; padding: 20px; display: table; text-align: justify; } span { display: block; text-align-last: justify; } .box .name { color: #fff; font-size: 24px; } .box .sub { color: #f29400; font-size: 15px; letter-spacing: 1px; }
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <div class="box"> <span class="name">Dr. Nielsen</span> <span class="sub">WEBDEVELOPER</span> </div> <div class="box"> <span class="name">Dr. Nielsen</span> <span class="sub">WEB-DEVELOPPER</span> </div> <div class="box"> <span class="name">Watch Out when top too long</span> <span class="sub">single-short-breaks!</span> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。