html - 使用 span 在 li 元素中塑造文本

Question

我在 li 元素内塑造文本时遇到一些问题。我遇到的一个问题是右浮动 div 不会 float 到右上角，而是在顶部留出一个空间。此外，文本没有正确地“塑造”。从this可以看出jsfiddle，div 位于网格线内，但是文本确实出现在网格线之外。还有一种方法可以在单词不合适时用破折号分隔单词(就像我在上一个单词中所做的那样)，或者使文本变小吗？

显示错误文本溢出的更新 jsfiddle:http://jsfiddle.net/u773M/1/

这是我创建文本 float div 的 php:

<?php for ($i = 1; $i < 7; $i++) {
 echo '<div class="trianglefloatleft" style="width:'.(3+($i*6)).'%;"></div>';
 echo '<div class="trianglefloatright" style="width:'.(9+($i*6)).'%;"></div>'; }
?>

Answer 1

如果你添加它就可以了

<div class="trianglefloatleft" style="width:9%;"></div>
<div class="trianglefloatright" style="width: 9%; margin-top: -12px;"></div>

这意味着你根据你的条件只创建一次宽度为 9% 的 div