Question

短版

我希望以这样的方式将文本放置在元素（固定宽度）内，如果它足够短，它将居中，但如果它太长而不适合，它将是左对齐的，并且结束文本将被切断（通过overflow: none）。在这种情况下，将提供带有全文的工具提示（通过title=""）。我该怎么办？

完整版

我所指的元素是图片下方的标题。由于并排有很多图片，我不希望标题重叠或任何东西（它们绝对位于图片下面，具有固定的宽度和高度）。对于一个标题，如果它居中，它会看起来更好，但是一个带有overflow:none的冗长字符串会因为居中而导致两端被切断。目前我有这个：

<div class="ImageTitle">
    <table style="margin: auto">
        <tr><td title="The title">The title</td></tr>
    </table>
</div>

这至少可以说是hackish，但我似乎无法使用简单的DIV和SPAN。有什么想法吗？

Answer 1

我认为这应该做你想要的：

div.ImageTitle {
    width: 100px; /* or whatever */
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}

JS Fiddle demo

请注意，我假设删除了（不必要的table），如果表仍在那里，那么它的css将覆盖div.imageTitle的那个。

虽然没有有条件地分配text-align: center或text-align: left，但前者（text-align: center;）只会从元素的中心移动到元素的左边距自然（除非text-direction设置为ltr以外的其他内容），并且右边是溢出。为了确保它只保留在一行，我使用white-space: nowrap来删除包装。

对于工具提示，我担心必须将硬编码到div（或您使用的任何其他元素）中，因为无法使用html以便它可以使用if / else statemnts。如果您愿意使用JavaScript，那么这是可能的，但只是 html / css。

Answer 2

这有帮助吗？（对不起，现在已经很晚了，我已经累了，没有注意力）

<!doctype html>
<html>
<head>
<style type="text/css">
.outer {
  max-width: 100%;
  overflow: hidden; 
}
.inner {
  display:inline-block;
  max-width:inherit;
  white-space: nowrap;
  text-align:left;
}
</style>
</head>
<body>
<div style="width:8em;text-align: center; border: 1px solid black">
<div class="outer">
  <span class="inner">
      Short cap
  </span>
</div>
<p />
<div class="outer">
  <span class="inner">
      A very long caption
  </span>
</div>

</div>

但必须有一种正确的方法来修复身高。

Answer 3

我认为你能做到这一点的唯一方法是使用JavaScript。

HTML / CSS：如何实现以下中左对齐？

短版

完整版

3 个答案: