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

【问题标题】：HTML/CSS: How to achieve the following center-left alignment?HTML/CSS：如何实现以下左中对齐？
【发布时间】：2011-06-14 04:05:18
【问题描述】：

短版

我想以这样的方式将文本放置在元素内（固定宽度），如果它足够短，它将居中，但如果它太长而无法容纳，它将左对齐，并且结束文本将被截断（通过overflow: none）。在这种情况下，将有一个带有全文的工具提示（通过title=""）。我该怎么做？

完整版

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

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

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

【问题讨论】：

标签： html css alignment text-alignment

【解决方案1】：

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

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

JS Fiddle demo.

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

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

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

【讨论】：

用大智慧古人的话来说：WTF？！是的，我承认，我从未尝试过简单地 center 输入文本，因为我认为它仍然符合居中约束并切断两端。虽然这确实以一种非常优雅的方式解决了我的问题，但我仍然想知道 - 为什么？我在 CSS2 规范中找不到这种行为。这是官方的吗？
我...不知道“官方”，但它肯定是一致的 =)

【解决方案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>

不过，必须有一种适当的方法来固定高度。

【讨论】：

不投反对票，但为什么你需要“固定高度”？只需使用white-space: nowrap;。

【解决方案3】：

我认为您可以做到这一点的唯一方法是使用 JavaScript。

【讨论】：