如何在矩形中自动调整文本。单击文本后，应出现矩形

Question

如何根据内容自动调整矩形文本。
Rectangle应根据其高度和宽度自动适合内容。一旦我们点击文本，就会出现rectangle。

.rectangle-box{
    width: 100%;
    border: 2px solid green;
    text-align: centre;
}
.rectangle-content:before{
    content: "";
    display: block;
    padding-bottom: 25%;
}

Answer 1

所有评论都在代码段中提供。

＆＃13;

＆＃13;

// get desired elements
var clickableElements = document.querySelectorAll(".clickable");

// loop though elements
clickableElements.forEach(function(clickableElement) {
  // add click event handler
  clickableElement.addEventListener("click", function() {
      // remove border class from every element
      clickableElements.forEach(function(clickableElement) {
        clickableElement.classList.remove("bordered");
      });
      // add needed class to element
      this.classList.add("bordered");
  });
});

＆＃13;

.container {
  display: flex;
  /* align children vertically */
  flex-direction: column;
  /* center items vertically */
  align-items: center;
}

.clickable {
  /* set transparent border to prevent element changing height */
  border: 1px solid transparent;
}

.bordered {
  /* just change a border color */
  border-color: green;
}

＆＃13;

<div class="container">
  <span class="clickable">Please click me</span>
  <span class="clickable">You can also click me</span>
  <span class="clickable">Some another element for demo</span>
</div>

＆＃13;

＆＃13;

＆＃13;