1

简洁版本

我想以这样的方式将文本放置在元素内（固定宽度），如果它足够短，它将居中，但如果它太长而无法容纳，它将左对齐，并且文本的结尾将被切断（通过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的 s 和SPANs 一起使用。有任何想法吗？

4

3 回答 3

2

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

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

JS 小提琴演示。

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

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

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

于 2011-01-23T21:05:10.483 回答
1

这有帮助吗？（对不起，来晚了，我累了，注意力不集中）

<!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>

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

于 2011-01-23T21:11:20.560 回答
0

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

于 2011-01-23T21:04:00.950 回答