Question

我有一个由带链接的列表组成的导航块。我希望所有链接的长度与＆＃34; text-align：justify＆＃34;相同。哪个工作正常。我还想使用CSS3转换和数据悬停在链接上添加悬停效果。这也有效。效果基本上是从底部翻译相同的单词将原始单词推出范围。这是通过数据悬停完成的（数据悬停指定进入视图的内容）。我的问题是，我无法证明这些内容的合理性。我可以改变它的颜色，大小，任何东西，我甚至可以制作一个＆＃34; text-align：right＆＃34;例如，它可以工作，但是text-align：justify赢了。

所以这是HTML：

<nav class="cl-effect-5">
    <ul class="main-nav">
        <li><a><span class="fulljustify" data-hover="C&nbsp;O&nbsp;L&nbsp;L&nbsp;E&nbsp;C&nbsp;T&nbsp;I&nbsp;O&nbsp;N">C O L L E C T I O N</span></a></li>
        <li><a><span class="fulljustify" data-hover="A&nbsp;R&nbsp;T&nbsp;&nbsp;&nbsp;I&nbsp;S">A R T   I S</span></a></li>
        <li><a><span class="fulljustify" data-hover="S&nbsp;H&nbsp;O&nbsp;P">S H O P</span></a></li>
        <li><a><span class="fulljustify" data-hover="A&nbsp;B&nbsp;O&nbsp;U&nbsp;T">A B O U T</span></a></li>
    </ul>
</nav>

这是CSS：

.fulljustify { text-align: justify; text-transform: uppercase; }
.fulljustify:after { content: ""; display: inline-block; width: 100%; }

ul li{
    list-style: none;
}
nav a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.35em;
    width: 100%;
}
span{
    width: 100%;
}

nav a:hover,
nav a:focus {
    outline: none;
}

.cl-effect-5 a {
    overflow: hidden;
    height: 1.35em;
}

.cl-effect-5 a span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.cl-effect-5 a span::before {
    position: absolute;
    top: 100%;
    width: inherit;
    color: yellow;
    text-align: justify;
    display: inline-block;
    content: attr(data-hover);
    font-weight: 700;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

我已经创建了一个jsfiddle，因此您可以更清楚地看到我正在寻找的结果是： http://jsfiddle.net/Lngvv5hq/

为什么，如果我可以文本对齐：正确的数据悬停，文本对齐是否正常工作？有什么方法可以完成它吗？如果我不能通过text-align：justify来做，你是否碰巧有其他方法可以达到我想要的结果？

提前谢谢

Answer 1

默认情况下，text-align: justify并不能证明块中最后一个（或唯一的，如本示例中）文本行。跨度本身的合理性仅仅是因为100％全局::after伪元素总是包含在新行中。微软推出text-align-last: justify（目前由CSS Text Level 3规范采用，supported采用Firefox -moz-前缀），但基于WebKit- / Blink的浏览器仍然不支持它。

Answer 2

text align not以这种方式工作，现在你可以分别为所有菜单使用字间距..

代表： -

word-spacing: 46px;

最适合 COLLECTION

Answer 3

你的研究中可能遇到过this post about justified text，而伊利亚对这篇文章的总结很好。

我在你的菜单上采取了另一种方法，来自丹尼斯＆＃39;关于letter-spacing的建议。尽管如此，这是一个艰难的小马，因为你的最短词（＆＃34; Shop＆＃34;）意味着letter-spacing中的每1px意味着为你的文字添加4px水平宽度。同样，＆＃34;收集＆＃34;在letter-spacing中为每1px增加10px的水平空间。有了这些＆＃34;乘数＆＃34;作为一种约束，单词的宽度很难准确匹配。

这是一个小提琴演示： http://jsfiddle.net/erlingormar/ymgobrx2/2/

（在确定合理问题的初始过程中，我使用您的数据悬停属性（添加span）更改了方法，以确保它不会导致问题）：

CSS3 - text-align：无法处理数据悬停

3 个答案: