如何在HTML中显示一个字符串？ [英] How do I show a string in HTML without wrapping?
问题描述
我正在为网站编写服务器端代码，我可以处理多个字符串来表示每个实体。例如：
[{
full_name：'旧金山巨人'，
long_name：'巨人' ，
medium_name：'Giants'，
short_name：'SF'
}，{
full_name：'Arizona Diamondbacks'，
long_name：'Diamondbacks'，
medium_name：'D \'backs'，
short_name：'AZ'
}，...]
我想显示最适合我的固定宽度表的字符串，而不需要包装。例如，在我想要的非常小的移动屏幕上：
/ ------------- \
|团队| Win％|
| ------ + ------ |
| SF | .580 |
| LA | .510 |
| AZ | .495 |
| CO | .442 |
| SD | .418 |
\ ______ | ______ /
但是在稍大的屏幕或人像模式下，想要
/ ------------------------ --\
|团队| Win％|
| ------------ + ------------- |
| 巨人| .580 |
| 道奇队| .510 |
| D'backs| .495 | < - 菱纹背景（即long_name）将不适合
| 落基山脉| .442 |在一行，所以站点显示D后面
| Padres| .418 | （即medium_name）。
\ ____________ | _____________ /
我没有使用固定宽度的字体。 / p>
这可以不用诉诸Javascript吗？
是的可以！
由于您不能提前知道哪个字符串将适合，诀窍是将全部字符串放在DOM，并让浏览器的流程规则确定哪个字符串将适合。我将描述需要什么HTML和CSS，相应的服务器端代码应该清楚。
概述
假设你有一个 div （下面描述的gadget），只有当它内部的字符串不包装时才可见。然后，您可以按照字符串长度的相反顺序显示垂直堆叠这些小工具的最长字符串：
* ---- ------- *
| AZ | \
* - \ -------- *
\ \
\
\ * --------- - *
| D'backs | \
* - \ -------- *
\ \
\
\ * --------- - *
| | \< - - 因为菱纹背景不合适。
* - \ -------- *
\ \
\
\ * ----------- *
| | < - 空，因为亚利桑那菱纹背不是
* ----------- *适合。
堆叠在页面上的彼此之间，您只会看到第一个适合的字符串。例如，在上述示例中，前两个小工具将不可见，您会看到
* ----- ------ *
| D'backs |
* ----------- *
因为 AZ 将被覆盖。
到目前为止还有吗？大。但是问题依然存在：你如何使一个 div 只有当其中的字符串适合时才可见？换句话说，你如何做...
小工具
这里有一些真正的CSS魔术。你必须盯着它几分钟，想想为什么它的工作。想象一下一个较小的查看窗口（ div A ），一个更大的div位于它后面的两倍（ div B ）。里面 div B 是一个spacer（ div C ）和文本（ div D ）。整个事情看起来像这样：
| -div B --------------- - * ------------------ *
|| -div C --------------- || -div ð--------- | |
|| （隐藏的固定宽度|| \ | | \
|| spacer div）|| D'b a c k s | |
|| _____________________ | * __ \ ____________ | * \
| |
| \ \ | \
| |
| \ \ | \
| |
| \ \ | \
| |
| ______________________________ \ ___ \ _______ | \
\ \ \
\ * -div A ------------- *
| |
\ | |
* ___________________ *
div A 是溢出隐藏的，所以当它们都垂直堆叠时，你只会看到发生在$ code> div A 之后的事情：在这种情况下，
div B - - - - - - * -div A ----------- *
| div C - - - - - | / -div D -------- \ | < - 大多数div B和所有div C
|| D'b a c k s | |被隐藏，因为div A是
| \ ______________ / |设置为溢出隐藏。
| - - - - - - - | ----------------- |
| _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ |
请注意， div C 和 div D 都设置为浮动在 div B 之内。如果 div D 中的字符串太长，它将在 div C 之下流动，它将不可见：
| div B - - - - - - * -div A ----------- *
| div C - - - - - | | < - 大部分div B和所有div C
| |被隐藏，因为div A是
| |设置为溢出隐藏。
| - - - - - - - | ----------------- |
/ -div D -------------------- \
| D i a m o n d b a c k s |
\ -------------------------- /
| _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ |
这是小工具！
一些CSS的例子使其更加清晰：
.divA {
position：relative;
overflow：hidden;
}
.divB {
position：absolute;
顶部：0;
right：0;
width：200％;
height：1000px / *任意大* /
}
.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>菱纹背景< / div>
< / div>
< / div>
完整解决方案
这是一个工作示例在这里给出的整个例子： http://jsfiddle.net/sFjdL/
（请注意，有一些细微的修改使得高度自然流动，我不在这里描述。）
ARrrgh。它必须如此复杂吗？为什么不能...
每个字符的近似值为 N 像素宽？
你可以 - 但为了安全起见，你必须高估你需要的空间，所以它可能是次优的。为 N 选择最小的安全值很难，总是导致浪费。此外，您将无法处理视力受损用户的大字体。上面的解决方案可以很好地扩展。
使用 @media CSS可以选择正确的字符串形式？
再次，您必须提前知道每个字符串有多少个像素长度，这在服务器端是不可能的。你可能会接近，但是为什么在完美的时候会接近？
叉这个想法
你可以采取这个概念的方向很多。例如，这里有一个 div ，只有当其中的字符串具有CSS省略号时才具有悬停文本，因为它不适合：
.under {
overflow：hidden;
text-overflow：ellipsis;
white-space：nowrap;
width：50％;
position：absolute;
顶部：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 =undertitle =Expectorating> Expectorating< / div>
< div class =divC>< / div>
< div class =divD over> Expectorating< / div>
< / div>
< / div>
和演示：
另外，尝试设置 div s都具有背景颜色，并删除隐藏的溢出。它有助于调试！示例： http://jsfiddle.net/X3bqx/1/
I'm writing the server-side code for a website, and I have at my disposal multiple strings to represent the each entity. For example:
[{
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'
}, ...]
I want to show the longest string that will fit in my fixed-width table without wrapping. For instance, on a very small mobile screen I want:
/-------------\
| Team | Win %|
|------+------|
| SF | .580 |
| LA | .510 |
| AZ | .495 |
| CO | .442 |
| SD | .418 |
\______|______/
But on a slightly larger screen or portrait mode, I want
/--------------------------\
| 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.
\____________|_____________/
I'm not using a fixed width font.
Can this be done without resorting to Javascript?
Yes it can!
Since you can't know ahead of time which string is going to fit, the trick is to put all the strings in the DOM and let the browser's flow rules determine which string will fit. I'll describe what HTML and CSS are required, and the corresponding server-side code should become clear.
Overview
Suppose you have a div (the "gadget", described below) that's only visible if the string inside it fits without wrapping. Then you can show the longest string that fits by vertically stacking these gadgets in reverse order of string length:
*-----------*
| AZ | \
*--\--------*
\ \
\
\ *-----------*
| D'backs | \
*--\--------*
\ \
\
\ *-----------*
| | \ <-- Empty because "Diamondbacks" doesn't fit.
*--\--------*
\ \
\
\ *-----------*
| | <-- Empty because "Arizona Diamondbacks" doesn't
*-----------* fit.
Stacked on top of each other on the page, you'll only see the first string that fits. For instance, in the above example, the first two gadgets would be invisible and you'd see
*-----------*
| D'backs |
*-----------*
because AZ would be covered.
With me so far? Great. But the question remains: how do you make a div that's only visible when the string inside it fits? In other words, how do you make...
The Gadget
Here's some real CSS magic. You'll have to stare at it for a few minutes to think about why it works. Imagine a smaller "viewing window" (div A) with a larger div positioned immediately behind it that was twice as wide (div B). Inside div B is a spacer (div C) and the text (div D). The whole thing looks like this:
|-div B-----------------*------------------*
||-div C---------------||-div D---------| |
|| (hidden fixed-width ||\ | | \
|| spacer div) || D ' b a c k s | |
||_____________________|*__\____________| * \
| |
| \ \ | \
| |
| \ \ | \
| |
| \ \ | \
| |
|______________________________\___\_______| \
\ \ \
\ *-div A-------------*
| |
\ | |
*___________________*
div A is overflow hidden, so when it's all stacked vertically, you'll only see whatever happens to sit behind div A: in this case, the contents of 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.
| - - - - - - - |-----------------|
| _ _ _ _ _ _ _ _ _ _ _ _ _ _ |
Note that div C and div D are both set to float left inside of div B. If the string inside div D is too long, it will flow underneath div C instead, and it will be invisible:
| 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 |
\--------------------------/
| _ _ _ _ _ _ _ _ _ _ _ _ _ _ |
And that's the gadget!
Here's some example CSS to make it more clear:
.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;
}
and the 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>
Complete Solution
Here's a working example of the entire example given here: http://jsfiddle.net/sFjdL/
(Note that there are some minor modifications to make the heights flow naturally, which I don't describe here.)
ARrrgh. Does it have to be so complicated? Why can't I just...
approximate that each character is N pixels wide?
You can -- but to be safe you'll have to overestimate the space you need, so it may be sub-optimal. Choosing the smallest "safe" value for N is hard, and always results in waste. Furthermore, you won't be able to handle large font sizes for vision-impaired users. The above solution scales just fine.
use @media CSS to choose the right string for the right form factor?
Again, you'll have to know ahead of time how many pixels long each string is, which is impossible on the server side. You can probably get close, but why "get close" when you can be perfect?
Fork This Idea
There are number of directions you might take this concept. For instance, here's a div that has hover text only if the string inside it has the CSS ellipsis because it doesn't fit:
.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;
}
the 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>
and the demo:
Also, try setting the divs to all have background colors and remove the overflow hidden. It helps for debugging! Example: http://jsfiddle.net/X3bqx/1/
这篇关于如何在HTML中显示一个字符串？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
