Question

我有一个问题。我无法在<span>标记内使文本居中。我确实知道我需要将<span>标签切换到我相信的<div>或<p>标签吗？但是，当我尝试此操作时，按钮的全部功能失败。

我将在下面粘贴整个代码，看看是否可以帮助我。

谢谢。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>


<span id="dots"></span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>

Answer 1

如果要使用跨度，请使用显示块而不是内联，否则可以切换到p或div标签

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>


<span id="dots"></span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
   <div style="text-align:center"> <button onclick="myFunction()" id="myBtn">Read more</button></div>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "block";
   moreText.style.textAlign = "center";
 //  btnText.parentElement.style.textAlign = "center";
  }
}
</script>

</body>
</html>

Answer 2

您只需在现有标签周围添加一个div：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>


<div style="margin: 12px 0 3px; text-align: center;">
<span id="dots"></span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
</div>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>

Answer 3

我不确定JavaScript是否即将发布。基本上，我如何将HTML内容居中的答案是使用CSS。可以使用样式属性text-align:center;（如果不用于测试和调试，最好使用外部文件） div和span的差异当然是语义上的（一个用于ext内容，另一个用于页面的未知DIVide部分-尚未在HTML5中使用section，article或其他描述性标记来避免）。区别还在于，当默认范围显示属性为内联时，div具有默认样式规则display：block。两者都不会更改JavaScript，因为在文件STYLE标记中显示：无；然后在单击绑定的函数（MyFunction（））中，您将得到以下内容：

  if (dots.style.display === "none") {
    dots.style.display = "inline";

表示一个“开关”，该开关将根据显示的当前值（在运行功能之前）设置对显示值进行内联或不设置。那么如何将跨度更改为div呢？这是没有用的，如果您的跨度内容是一些文本，则将其放入div会不太准确；认为SEO。

如何在文本范围内居中？

3 个答案: