时间戳

首页 > 解决方案 > 用 CSS 对齐短线

css - 用 CSS 对齐短线

问题描述

我想用 CSS 来证明一条非常短的线是合理的。，text-align: justify;它不起作用。还有另一种方法可以做到这一点吗？

body {
  margin: 0;
  padding: 0;
  width: 50%;
}

.justify {
  font-family: Arial;
  font-size: 30px;
  width: 100%;
  border: 1px solid red;
  padding: 10px;
  color: red;
  text-align: justify;
}
<div class="justify">Justify this text</div>

将感谢您的帮助。:)

标签： css

解决方案

text-align-last: justify;改为使用 

body {
  margin: 0;
  padding: 0;
  width: 50%;
}

.justify {
  font-family: Arial;
  font-size: 30px;
  width: 100%;
  border: 1px solid red;
  padding: 10px;
  color: red;    
  text-align-last: justify;
}
<div class="justify">Justify this text</div>

或者如果不支持上述内容，则使用伪元素破解：

body {
  margin: 0;
  padding: 0;
  width: 50%;
}

.justify {
  font-family: Arial;
  font-size: 30px;
  width: 100%;
  border: 1px solid red;
  padding: 10px;
  color: red;    
  text-align: justify;
  height: 1.2em;
}
.justify::after {
  content:"";
  display:inline-block;
  width:100%;
}
<div class="justify">Justify this text</div>

推荐阅读