CSS如何设置文本下方doth下划线的自动长度

【问题标题】：CSS how to set auto length of doth underline below textCSS如何设置文本下方doth下划线的自动长度
【发布时间】：2020-11-18 21:12:12
【问题描述】：

在CSS 中，我希望在我的文本下方添加下划线，但用户输入的文本可以短或长，并且虚线下划线必须绘制到行尾（A4 页）。任何人帮助纠正它。这是我的代码

<p style="font-size: 13px;">
          I come from ៖ <u style="border-bottom: 1px dashed #999; text-decoration: none; width:100%;"> USA </u>
</p>

我的代码只返回文本下方的虚线下划线:(

【问题讨论】：

您的代码看起来不错...发生了什么问题...？
您需要通过可能的屏幕截图来改进您的问题，以了解您正在寻找的内容。此外，用于构建您的问题的语言不完整且不清楚。

标签： html css css-transitions stylesheet

【解决方案1】：

1. 如果您希望整行被加下划线，您需要为文本设置width: 100%;，以便将边框绘制到行尾。

.underline{
    width: 100%;
    border-bottom: 1px dashed #999;
}

<p class="underline">
  I come from USA
</p>

2. 如果您希望下划线从文本中间开始到行尾，您可以使用ul 和li 将文本的两个部分并排放置，然后将width: calc(100% - 100px); 用于您希望下划线开始的文本部分。 100px 被减去是因为文本的第一部分没有下划线，所以如果文本的无下划线部分较长，则需要根据其宽度减去较大的部分。

.underline {
  width: calc(100% - 100px);
  border-bottom: 1px dashed #999;
}

ul {
  list-style-type: none;
  padding-left: 0; 
}

li p {
  display: inline-block;
}

<ul>
  <li>
    <p>
      I come from
    </p>
    <p class="underline">
      USA
    </p>
  </li>
</ul>

【讨论】：