Question

我希望我的p文字在其下方有一条横跨文字宽度的虚线，我还希望p水平居中。

文本永远不会超过一行，但它在该行的长度会有所不同（如果完全修复，我可以轻松解决这个问题。）

我无法弄清楚解决方案。我有以下结构：

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

在我的CSS中，我有类似的东西：

        .container      {
                    width: 650px;
                    height: 100px;
                    }

    .content    {
                    text-align: center;
                    text-transform: uppercase;
                    font-size: 26px;
                    color: #4D4D4D;
                    }

        p           {
                    border-bottom: #808080;
                    border-bottom-width: thin;
                    border-bottom-style: dotted;            
                    }

Answer 1

此处：http://jsfiddle.net/DqFp7/

<强> HTML

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

<强> CSS

.container {
    width: 650px;
    height: 100px;
}

.content {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    color: #4D4D4D;
}

p {
    border-bottom: #808080;
    border-bottom-width: thin;
    border-bottom-style: dotted;  
    display:inline;    
}

Answer 2

您可以将text-decoration与text-decoration-style结合使用，尽管对此功能的支持仍然很差（2018年8月：Safari和Edge中不支持）。

它在spec中，因此最终将得到支持。

。

示例：

.container,
.content {
  width: 100%;
}

.content p {
  font-size: 30px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-align: center;
}

<div class="container">
  <div class="content">
    <p>This is the title</p>
  </div>
</div>

使中心对齐文本的边框底部跨度宽度

2 个答案: