1

请帮助使用 CSS 实现这一点：我有一组文本字符串，从 1 个字符到 200 个字符。我需要将它们显示在网页中，每个都在单独的框中。

  • 框流类似于文本，从左到右直到页面末尾然后换行
  • 每个框的背景颜色必须是青色。
  • 最小宽度和高度必须都是 50 像素
  • 框之间的 1-2 像素空间（可以通过 margin=1 实现）
  • 文本和框的边缘之间必须始终至少有两个像素
  • 文本垂直对齐到中间
  • 文本水平居中对齐
  • 框的最大宽度必须为 300 像素
  • 如果文本不适合 50x300，则会在框内裁剪（框不会变大）
  • 每个盒子应该有 1 像素的黑色边框

对于有经验的人来说，这一定很简单！我已经尝试了几乎所有可能的 CSS 标签；但总是有问题。我读过关于 CSS 装箱的文章，但令人惊讶的是，它只是让它变得更加复杂。

<style>
z {
    min-width: 50;
    #min-height: 50;
    padding: 1px;
    padding-color: magenta;
    margin: 1px;
    margin-color: red;
    #padding-left: 10px;
    display: table-cell;
    #height: 50;
    #vertical-align: middle;
    #text-align:center;
    background-color: cyan;
    #border: 1px;
    #border-color:green;
    /* padding:10px 10px 10px 10px; */
    border-top:1px solid
    border-style:solid;
    border-color:#ff0000 #0000ff;
    outline-style:dotted;
    outline-color:#00ff00;
    outline-width: 1px;
    color: blue;
}
</style>

<html>
    <z>1</z>
    <z>abcdefghijklmnope</z><z>2</z><z>blablablabla</z>
</html>

我正在粘贴这个，所以你可以看到我尝试的难度和错误。

4

3 回答 3

5

好的。

  1. 不要使用编造/无效的 HTML 元素或无效的 CSS 注释。仅仅因为“它似乎并不重要”，并不意味着它不会产生问题。当您的 HTML/CSS 无效时，无法判断这是否是问题所在，您只会得到告诉您纠正它们的答案。

  2. CSS 需要长度单位。min-width: 50;是无效的，如果它对你有用，那只是意味着你没有编写正确的 HTML/CSS 并且文档处于 Quirks 模式，这意味着浏览器会模拟旧的 IE 错误，这使得调试更加困难。

  3. 没有padding-color或之类的属性margin-color。不要编造事情。使用 CSS 和验证器来检查您的代码。（http://validator.w3.org和http://jigsaw.w3.org/css-validator/）。

  4. 使用display: table-cell;只会将所有元素放在一个“表格行”中，而无需包装。

 

<p><span><span>1</span></span></p>
<p><span><span>abcdefghijklmnope</span></span></p>
<p><span><span>2</span></span></p>
<p><span><span>blablablabla</span></span></p>

p {
    min-width: 50px;
    max-width: 300px;

    height: 50px;
    padding: 2px;
    margin: 1px;

    float: left;
    background-color: cyan;

    border: 1 px solid blue;

    color: blue;
    overflow: hidden;
}

p > span {
    display: table;
    height: 100%;
    width: 100%;
}

p > span > span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

见http://jsfiddle.net/DyzAD/1/

于 2013-05-21T14:03:09.107 回答
1

（精炼的答案）

如果需要高度/宽度，则不需要 display:block，因为 OP 还希望元素彼此相邻出现，然后中断，所以 float:left; 是必需的，而不是显示块；

我已经实现了 text-overflow:ellipses; 的使用。帮助“打破”文本，使元素始终具有视觉平衡和垂直对齐。也许您可以提供一个工具提示或 html abbr 属性来显示整个文本？

float:left on 'z' on any element 将（应该）解决您的问题。

span {
    min-width: 50px;
    max-width:200px;
    height: 24px;
    margin: 1px;
    float:left;
    text-overflow:ellipsis;
    overflow:hidden;
    vertical-align: middle;
    text-align:center;
    background-color: cyan;
    border: 1px solid green;
    padding:10px;
    color: blue;
    white-space:no-wrap;
}

http://jsfiddle.net/MzKCh/3/

于 2013-05-21T13:47:32.230 回答
0

我不确定我是否正确理解了您的要求，但是float:left元素的混合display:table-cell会给您在到达页面末尾时换行但允许垂直和水平居中对齐的文本

html:

<div><span>test</span></div>
<div><span>test 1</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length and will hide extra content if really really long</span></div>
<div><span>a</span></div>
<div><span>Amassivewordwithnospacesthatwillalsowrapifithits300px</span></div>

CSS：

div 
{
    border:1px solid #000000; 
    background-color:cyan;
    float:left;
    margin:1px 1px 0 0;

    box-sizing:border-box;
    height:50px;
    max-width:300px;
    overflow:hidden;
}

div > span 
{
    display:table-cell;
    min-width:50px;
    max-width:300px;
    height:50px;
    padding:2px;
    text-align:center;
    word-wrap:break-word;
    box-sizing:border-box;
    vertical-align:middle;
}

http://jsfiddle.net/up6KC/6/

于 2013-05-21T13:53:10.573 回答