如何在矩形中自動適合文本。矩形應該出現，一旦我們點擊文本

-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

如何在矩形中自動適合文本。矩形應該出現，一旦我們點擊文本

回答

相關問題