Question

我有一个

#menu {
  width: calc(100vw - 60px);
  left: 30px;
}

如何在可用空间中证明这些词语是合理的？

我正在尝试

text-align:justify

但它不起作用。

https://jsfiddle.net/ju0mz9t0/1/

Answer 1

我认为你的意思是文字。这是因为text-align: justify不能证明文本块的最后一行。一种解决方法是添加一个css生成的内容项，其作用类似于内联文本项，但是如下所示拉伸容器的整个宽度：

#menu:after {
  content: '';
  display:inline-block;
  width: 100%;
}

#menu{
font-family: Arial;
font-size:22px;
width: calc(100vw - 60px);
left: 30px;
text-align: justify;
text-justify: inter-word;
position:fixed;
}

#menu:after {
  content: '';
  display:inline-block;
  width: 100%;
}

<div id="menu">
SS17 FW16/17 ABOUT STOCKISTS
</div>

Answer 2

你的意思是这样吗？

此解决方案使用display: flex及其属性justify-content: space-between;

详细了解flexbox here

＆＃13;

#menu {
  display: flex;
  font-family: Arial;
  font-size: 22px;
  width: calc(100vw - 60px);
  left: 30px;
  text-align: justify;
  text-justify: inter-word;
  position: fixed;
  justify-content: space-between;
}

＆＃13;

<div id="menu">
  <span>SS17</span><span>FW16/17</span><span>ABOUT</span><span>STOCKISTS</span>
</div>

＆＃13;

在宽度为100％ - 60px的div中对齐文本

2 个答案: