3

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

[{
  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 的情况下完成吗？

4

1 回答 1

3

是的，它可以！

由于您无法提前知道哪个字符串适合，因此诀窍是将所有字符串放入 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 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 D：

  | 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是困难的，而且总是会导致浪费。此外，您将无法为视力受损的用户处理大字体。上述解决方案可以很好地扩展。

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

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

分叉这个想法

您可能会采用这个概念有很多方向。例如，这里有一个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/

另外，尝试将divs 设置为所有具有背景颜色并删除隐藏的溢出。它有助于调试！示例：http: //jsfiddle.net/X3bqx/1/

于 2013-09-15T21:00:25.167 回答