如何格式化文本以在两列中对齐

时间:2014-02-25 19:55:08

标签: css

首先关闭标题可能不太清楚,但我不知道想出更好的标题。

我有一个文本,我把它放在速度模板中的td单元格中,如下所示

* My name
is what?

我想要的是更加格式化的东西,如下所示。

* My name
  is what?

“我的名字是什么?”是可变的我打印,我所做的就是整合*并放入单元格进行显示

可以做些什么来实现它。我不确定最好的开始方式。我用IE8

2 个答案:

答案 0 :(得分:0)

以下是一个可能适合您的解决方案:

<强> Demo Fiddle

而不是将内容分成不同的元素并定位它们(​​或嵌套它们)。我认为课前一个简单的方法在这种情况下可以很好地运作。

HTML:

<div class="copy-block">
  My name is what?
</div>

CSS:

.copy-block {
    width: 60px;
    position: relative;
}

.copy-block:before {
    content: "*";
    position: absolute;
    left: -15px;
    top: 3px;    
}

答案 1 :(得分:0)

名称是可变的。可以通过在表格单元格中添加中断来解决两行上的输出。

table {
    border: 1px solid gray;
    font: 12px arial;
    border-collapse: collapse;
}
td {
    border: 1px solid gray;
}
.asterix-name {
    position: relative;
    padding: 5px 5px 5px 15px;
}
.asterix-name:before {
   content:'* ';
   position: absolute;
   left: 5px;
   top: 0.5em;
}

<table>
    <tr>
        <td>
          <div class="asterix-name">My name<br> is what?</div>
        </td>
    </tr>
</table>

http://jsfiddle.net/Fb7jT/49/