源代码：
下载代码
AI 编程工具
点击运行
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div class="relative rounded-xl overflow-auto"> <div class="mx-auto max-w-xs bg-white shadow-xl p-4 text-slate-500 text-sm leading-6 sm:text-base sm:leading-7 dark:bg-slate-800 dark:text-slate-400"> 当控制文本流时，使用 CSS 属性 <span class="inline bg-sky-100 font-bold text-sm text-slate-900 font-mono rounded dark:bg-slate-600 dark:text-slate-200">display: inline</span> 将使得元素内的文本正常换行。 <br> <br> 而使用属性 <span class="inline-block bg-sky-100 font-bold text-sm text-slate-900 font-mono rounded dark:bg-slate-600 dark:text-slate-200">display: inline-block</span> 将包裹元素，防止其内部文本扩展超出其父元素。 <br> <br> 最后，使用属性 <span class="block bg-sky-100 font-bold text-sm text-slate-900 font-mono rounded dark:bg-slate-600 dark:text-slate-200">display: block</span> 将使元素独占一行并填充其父元素。 </div> </div> </body> </html>
运行结果：
AI 编程工具