Question

我希望在HTML表格中显示合理的文本（用于电子邮件签名）。

我希望实现的目标是：

Justified text

然而，到目前为止我得到的是：

enter image description here

代码如下：

<html>
<head>
<title>JohnDoe</title>
<style> 
    #contentTable{
        padding-top: 25px;
        padding-right: 35px;
        padding-bottom: 25px;
        padding-left: 35px;
        width: 480px;
        height: 105px;
    }

    #nameRow{
        height: auto;
    }

    #nameField{
        font-size: 24;
        font-family: "Helvetica";
        color: #73A84D;
        font-weight: bold;
        width: 100%;
    }

    #dirRow{
        height: auto;
    }

    #dirField{
        font-size: 18;
        font-family: "Helvetica";
        color: #606062;
    }

    .descRow{   
    }

    .descField{
        font-size: 10;
        font-family: "Helvetica";
        font-weight: 900;
        color: #96989A;
    }

    .valueField{
        font-size: 10;
        font-family: "Helvetica";
        font-weight: 900;
        color: #606062;
        text-align: justify;
    }
</style>

<body>
    <table id="contentTable">
        <tr>            
            <td>
                <table id="infoTable">
                    <tr id="nameRow">
                        <td id="nameField">JOHN DOE</td>    
                    </tr>
                    <tr id="dirRow">
                        <td id="dirField">
                            Attorney
                        </td>   
                    </tr>                   
                    <tr>
                        <table>
                            <tr>
                                <td>
                                    <p id="descFieldPara" class="descField">
                                        PHONE:<br>
                                        EMAIL:<br>
                                        &nbsp;<br>
                                        URL:
                                    </p>                                
                                </td>
                                <td id="valueFieldPara" class="valueField">
                                    <p>+ 12 3456 789 012<br>JOHN.D@BLAHBLAH.COM.US<br>ATTORNEY@BLAHBLAHJOHNDOE.COM.US<br>WWW.BLAHBLAHJOHNDOE.COM.US
                                    </p>    
                                </td>
                            </tr>
                        </table>    
                    </tr>
                </table>
            </td>   
        </tr>
    </table>
</body>
</head>
</html>

有没有办法实现我想做的事情？为什么尽管使用text-align: justify; 我得不到我想要的东西？

Answer 1

这是因为您使用<p>和<br>进行了布局。如果您使用的是表格，那么为什么不使用多行？

例如：

                <table>
                    <tr>
                        <td class="descField">
                            PHONE:                          
                        </td>
                        <td class="valueField">
                            + 12 3456 789 012 
                        </td>
                    </tr>
                    <tr>
                        <td class="descField">
                            Email
                        </td>
                        <td class="valueField">
                            JOHN.D@BLAHBLAH.COM.US
                        </td>
                    </tr>
                </table>

<强>更新

好的，这是一个CSS hack，允许1行对齐文本：

Demo

这里的关键是表格单元格中的<p>标签会在元素末尾注入内容以伪造第二条线并强制文本变得合理。然后，我将<p>高度和行高设置为与字体大小匹配的较小值，以便与其他单元格文本对齐。

    .valueField p {
        text-align: justify;
        width: 100%;
        height:10px;
       line-height:10px;
       margin:0;
    }
.valueField p:after{
    content: "";
    display: inline-block;
    width: 100%;
}

Answer 2

我无法查看这些图片

这会告诉您http://www.w3schools.com/tags/att_p_align.asp

的方式

例如

p {
align:justify;
}

Answer 3

这是你想要实现的目标吗？

**我不是代码的所有者

http://jsfiddle.net/B4Y2u/

似乎需要一些技巧：

div {
  text-align: justify;
}

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}

在HTML表格中对齐文本

3 个答案: