如何在矩形中自动适合文本。矩形应该出现，一旦我们点击文本

-2

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

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

来源

2017-07-18 ammy

请说明您的具体问题或添加额外的细节，突显正是你需要的。正如目前所写，很难确切地说出你在问什么。 –

我们需要矩形应该根据文本的大小。它应该根据文本的大小自动调整自己。它应该出现，一旦我们点击这个文本。 – ammy

请检查以下链接。我们附上了屏幕截图。我们需要这个矩形应该根据文本的宽度和高度。它应该适合文本大小。我想它会清楚。 https://i.stack.imgur.com/tKrZ4.png – ammy

所有评论都以代码段的形式提供。

// 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"); 
 
    }); 
 
});

.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; 
 
}

<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>

来源

2017-07-18 17:01:23

如何在矩形中自动适合文本。矩形应该出现，一旦我们点击文本

回答

相关问题