Question

所以我在固定宽度div中有两个单词。目前，我正在使用文本溢出：省略号来剪切它们。但如果第一个单词真的很长，它会推动并剪辑第二个单词。

所以它看起来像这样：

| Word 1 Word 2 |

当我有一个很长的第一个字时，它会像这样切断字2：

| ReallyLongW ... |

我怎样才能得到它，所以Word 2没有被切断，而Word 1就是这样：

| Reall ...... Word 2 |

我觉得肯定有一些css和容器的组合来完成这项任务，但我还没有找到它。请注意，我仍然希望Word 2左对齐并像之前一样附加到Word 1的末尾，只是溢出行为应该更改。

编辑：这是我最接近的

＆＃13;

.mydiv {
    max-width: 150px;
}

.myspan {
    float: left;
    max-width: 50%;
    color: #f00;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.myotherspan { 
    float: left;
    color: #00f;
}

＆＃13;

<div class="mydiv">
   <span class="myspan">Wordaksjdkajsdasfasdfds</span>
   <span class="myotherspan">Word 2</span>
</div>
<div class="mydiv">
   <span class="myspan">Word 1</span>
   <span class="myotherspan">Word 2</span>
</div>

＆＃13;

这对我来说足够好，因为在我的情况下，我知道Word 2总是很小并且大小相同（4-7个字符）。但理想情况下，我不想对最大宽度进行硬编码，因为我不想将其硬编码为最坏情况下的7个字符，然后浪费空白，结果只有4个字符。我宁愿它动态调整Word 1的大小以适应Word 2适合的情况。

Answer 1

试试这个

.mydiv {
    max-width: 100px;
}

.myspan {
    float: left;
    width: 50%;
    color: #f00;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.myotherspan { 
    float: left;
    width: 50%;
    color: #00f;
}

<div class="mydiv">
   <span class="myspan">Wordaksjdkajsd</span>
   <span class="myotherspan">Word 2</span>
</div>

如何阻止跨越另一个跨度的溢出跨度

1 个答案: