在 HTML 中保留空格和換行
在一個專案中，我使用 <textarea> 欄位在表單中獲取工作的描述，然後將其存儲在數據庫中。 現在，這個描述並沒有被解釋為 HTML，當我將它添加到頁面中時，瀏覽器並沒有尊重空格和換行。 我希望獲得這樣的顯示效果： 但我得到了這樣的顯示效果： 解決方法是添加以下 CSS 屬性： white-space: pre-wrap; 在 Tailwind 中，對應的類名為 whitespace-pre-wrap。
CSS
在 JavaScript 中如何获取 CSS 属性的值
假设您想要在网页中获取 CSS 属性的值，其中该属性是使用样式表设置的。您可以如何做到这一点呢？ 假设您想要在网页中获取 CSS 属性的值，其中该属性是使用样式表设置的。 元素的 style 属性不会返回它，因为它仅列出内联样式或动态设置的 CSS 属性。 而不是外部样式表中定义的属性。 那么，您该怎么做呢？可以使用 getComputedStyle()，它是一个全局函数： const element = document.querySelector('.my-element') const style = getComputedStyle(element) style.backgroundColor // RGB 值
在 React 中更改 Heroicons SVG 的描邊寬度
我在一個 Next.js 應用程序中使用 Heroicons，它們方便地將圖標封裝為 React 組件。 我想要做的一件事是自定義描邊寬度，使它們顯示得更細。 我查看了 JSX 中如何做到這一點，也許使用屬性，但是我找不到方法。 我可以直接從該網站導入 SVG，但我喜歡使用 React 組件的方法。 由於某種原因，我認為直接設置全局 CSS 屬性並不起作用，因為它在 SVG 中是硬編碼的，但實際上它起作用了： svg path { stroke-width: 1; }
在 Tailwind 中對子元素應用樣式
雖然不常發生，但有時候我會考慮如何在 Tailwind 中對子元素應用樣式。 下一次遇到這種情況，我就可以參考這篇部落格文章來解決。 你可以使用以下這個類別名稱將 bg-gray-300 這個樣式套用到當前元素的所有子元素上： [&>\*]:bg-gray-300 像這樣使用： <div class="[&>\*]:bg-gray-300"> .... </div>
在元素內部添加CSS邊框
我有一個盒子列表，當鼠標懸停時，我想要顏色反轉。 div { background-color: #000; color: #fff; } 所以我進一步添加了以下代碼： div:hover { background-color:#fff; color:#000; } 但是… 盒子看起來不像"一個盒子"。所以我添加了邊框： div:hover { background-color:#fff; color:#000; border: 4px solid #000; } 但由於邊框是添加在盒子外部，所以看起來很奇怪。 我找到的最佳方法是使用box-shadow屬性： div:hover { background-color:#fff; color:#000; box-shadow: inset 0px 0px 0px 4px #000; } 以下是結果：
如何使 flex 子元素不填充整個高度
我有一個水平的項目列表，當一行文字有 2 行時，會有一些額外的空間，並且其 flex 兄弟元素會延伸到整個高度。 這是原始碼： <li class="flex"> <code class="flex-none text-sm whitespace-normal mr-2 mt-0.5 bg-white text-black p-1 "> {new Date(post.date).toString().slice(4, 11)} </code>{' '} <code class="flex-none text-sm whitespace-normal mr-2 bg-black text-white border p-1 "> {post.tag} </code> <a href={'/' + post.url + '/'}>{post.title}</a> </li> 為了修復這個問題，我在 code 區塊中添加了 self-start 類別，這在 Tailwind CSS 中應用了 CSS align-self: start;。
如何使水平线不可见
我想在我的 HTML 页面上的兄弟元素之间创建一个分隔。 我有一个想法，可以将它们包装在section标签或div中，并在该元素的顶部和底部应用外边距。 另一种方法是不改变整体的 HTML 结构，而是使用一个标签作为分隔线。 所以我使用了一个 hr 标签，它在语义上表示段落级别标签之间的主题性断裂。 我使用以下样式来使它不可见，但仍然占用空间： hr { margin-top: 100px; border: none; }
如何使用 CSS 將項目置於容器底部
學習如何使用 CSS 將項目固定在容器底部 這是一個相當常見的需求，我最近也遇到了這個問題。 我曾經嘗試使用 bottom: 0 給目標元素設定位置，希望將其固定在父元素的底部。 後來發現我漏掉了兩件事：在目標元素上設置 position: absolute，並在父元素上添加 position: relative。 範例代碼： <div class="container-element"> ... <div class="element-to-stick-to-bottom"> ... </div> </div> .element-to-stick-to-bottom { position: absolute; bottom: 0; } .container-element { position: relative; }
如何使用 CSS 為列表添加樣式
CSS 可以用來為列表添加多種樣式。 list-style-type 屬性用於設置列表所使用的預定義標記： li { list-style-type: square; } 這裡有很多可能的取值，你可以在這裡查看 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type，其中包含了它們的外觀示例。其中一些最受歡迎的取值包括 disc、circle、square 和 none。 list-style-image 屬性用於在預定義標記不適用時，使用自定義圖片作為標記： li { list-style-image: url(list-image.png); } list-style-position 屬性允許將標記放置在列表內容的 outside（默認）或 inside ，在頁面的流動中而不是頁面外： li { list-style-position: inside; } list-style 這個縮寫屬性讓我們可以在同一行中指定所有這些屬性： li { list-style: url(list-image.png) inside; }
如何使用 Flexbox 讓元素固定在頁面底部
這裡演示了如何將一個 div 元素固定在頁面底部。 以下是一個簡單的範例，展示了如何將一個 div 元素對齊到頁面底部。 我在高度超出視窗的情況下，需要將一個元素固定在頁面底部，但如果屏幕尺寸不夠，它仍然需要跟隨頁面流動。 以下是我使用 Tailwind CSS 創建的非常簡化的範例： <html> <body class="text-center"> <p>test</p> <p>© 2022</p> </body> </html> 我們希望 “footer” HTML 元素使用 Flexbox 固定在底部。 首先，我們使用 Flexbox (flex flex-col)，並且將最小高度設置為屏幕高度 (min-h-screen)。 接下來，我們在 footer 元素之前添加 flex-grow 屬性： <html> <body class="text-center min-h-screen flex flex-col"> <p class="flex-grow">test</p> <p>© 2022</p> </body> </html> 這段代碼生成以下結果：