html - 如何在不换行的情况下在 HTML 中显示字符串？

Question

我正在为一个网站编写服务器端代码，我可以使用多个字符串来表示每个实体。例如:

[{
  full_name: 'San Francisco Giants',
  long_name: 'Giants',
  medium_name: 'Giants',
  short_name: 'SF'
}, {
  full_name: 'Arizona Diamondbacks',
  long_name: 'Diamondbacks',
  medium_name: 'D\'backs',
  short_name: 'AZ'
}, ...]

我想显示适合我的固定宽度表格且无需换行的最长字符串。例如，在我想要的非常小的移动屏幕上:

/-------------\
| Team | Win %|
|------+------|
| SF   | .580 | 
| LA   | .510 |
| AZ   | .495 |
| CO   | .442 |
| SD   | .418 |
\______|______/

但是在稍微大一点的屏幕或者纵向模式下，我想要

/--------------------------\
| Team       | Win %       |
|------------+-------------|
| "Giants"   | .580        | 
| "Dodgers"  | .510        |
| "D'backs"  | .495        |  <-- "Diamondbacks" (i.e., long_name) wouldnt fit
| "Rockies"  | .442        |       on one line, so the site displays "D'backs"
| "Padres"   | .418        |       (i.e. medium_name) instead.
\____________|_____________/

我没有使用固定宽度的字体。

这可以不借助 Javascript 来完成吗？

Answer 1

是的，它可以!

由于您无法提前知道哪个字符串适合，技巧是将所有 字符串放入 DOM 中，让浏览器的流规则确定适合哪个字符串。我将描述需要哪些 HTML 和 CSS，相应的服务器端代码应该变得清晰。

概览

假设您有一个 div(下面描述的“小工具”)，只有当它里面的字符串不换行时才可见。然后，您可以通过按字符串长度的相反顺序垂直堆叠这些小工具来显示适合的最长字符串:

*-----------*
|  AZ       | \
*--\--------*
 \              \
     \
   \  *-----------*
      |  D'backs  | \
      *--\--------*
       \              \
           \
         \  *-----------*
            |           | \      <-- Empty because "Diamondbacks" doesn't fit.
            *--\--------*
             \              \
                 \
               \  *-----------*
                  |           |  <-- Empty because "Arizona Diamondbacks" doesn't
                  *-----------*      fit.

在页面上堆叠在一起，您只会看到适合的第一个字符串。例如，在上面的示例中，前两个小工具是不可见的，您会看到

*-----------*
|  D'backs  |
*-----------*

因为 AZ 会被覆盖。

到现在为止？伟大的。但问题仍然存在:如何制作一个仅在适合其中的字符串时才可见的 div？换句话说，你如何使...

小工具

这是一些真正的 CSS 魔法。您必须盯着它看几分钟，才能思考它为什么会起作用。想象一个较小的“查看窗口”(div A)，紧靠在它后面的是一个更大的 div，宽度是它的两倍 (div B)。 div B 内部是一个间隔符 (div C) 和文本 (div D)。整个事情看起来像这样:

|-div B-----------------*------------------*
||-div C---------------||-div D---------|  | 
|| (hidden fixed-width ||\              |  | \
||     spacer div)     || D ' b a c k s |  |  
||_____________________|*__\____________|  *   \
|                                          |
|                        \   \             |     \
|                                          |
|                          \   \           |       \
|                                          |
|                            \   \         |         \ 
|                                          |
|______________________________\___\_______|           \

                                 \   \                   \

                                   \    *-div A-------------*
                                        |                   |
                                     \  |                   |
                                        *___________________*

div A 是溢出隐藏的，所以当它全部垂直堆叠时，您只会看到位于 div A 后面的内容:在这种情况下，内容div:

  | div B -  -  -  -  -  -  *-div A-----------*
    | div C  -  -  -  -  -  |/-div D--------\ |  <-- Most of div B and all of div C
                            ||D ' b a c k s | |      are hidden because div A is
                            |\______________/ |      set to overflow hidden.
    |  -  -  -  -  -  -  -  |-----------------|



  | _  _  _  _  _  _  _  _  _  _  _  _  _  _  |

请注意，div C 和 div D 都设置为在 div B 内向左浮动。如果 div D 中的字符串太长，它将流到 div C 下方，并且不可见:

  | div B -  -  -  -  -  -  *-div A-----------*
    | div C  -  -  -  -  -  |                 |  <-- Most of div B and all of div C
                            |                 |      are hidden because div A is
                            |                 |      set to overflow hidden.
    |  -  -  -  -  -  -  -  |-----------------|
    /-div D--------------------\
    |  D i a m o n d b a c k s |
    \--------------------------/
  | _  _  _  _  _  _  _  _  _  _  _  _  _  _  |

这就是小工具!

这里有一些示例 CSS 可以使它更清楚:

.divA {
    position: relative;
    overflow: hidden;
}

.divB {
    position: absolute;
    top: 0;
    right: 0;
    width: 200%;
    height: 1000px /* arbitrarily large */
}

.divC {
    width: 50%;
    height: 50%;
    float: left;
}

.divD {
    float: left;
    background-color: white;
}

和 DOM:

<div class="divA">
  <div class="divB">
    <div class="divC"></div>
    <div class="divD">AZ</div>
  </div>
  <div class="divB">
    <div class="divC"></div>
    <div class="divD">D'backs</div>
  </div>
  <div class="divB">
    <div class="divC"></div>
    <div class="divD">Diamondbacks</div>
  </div>
</div>

完整的解决方案

这是此处给出的整个示例的一个工作示例:http://jsfiddle.net/sFjdL/

(请注意，这里有一些小的修改，使高度自然流动，我在这里不做描述。)

嗯。有必要这么复杂吗？为什么我不能...

每个字符大约为 N 像素宽？

您可以——但为了安全起见，您必须高估所需的空间，因此它可能不是最佳选择。为 N 选择最小的“安全”值很困难，而且总是会导致浪费。此外，您将无法为有视力障碍的用户处理大字体。上述解决方案可以很好地扩展。

使用 @media CSS 为正确的外形选择正确的字符串？

同样，您必须提前知道每个字符串有多少像素长，这在服务器端是不可能的。您可能可以接近，但是当您可以完美时，为什么要“接近”？

fork 这个想法

您可以从多个方向理解这个概念。例如，这里有一个 div，只有当它里面的字符串有 CSS 省略号时才会有悬停文本，因为它不适合:

.under {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.over {
    position: relative;
    z-index: 2;
}

DOM:

<div class="divA">
    <div class="invisible_for_height"></div>
    <div class="divB">
        <div class="under" title="Expectorating">Expectorating</div>
        <div class="divC"></div>
        <div class="divD over">Expectorating</div>
    </div>
</div>

和演示:

http://jsfiddle.net/X3bqx/

此外，尝试将 div 设置为全部具有背景色并移除隐藏的溢出。它有助于调试!示例:http://jsfiddle.net/X3bqx/1/