聊天区域的样式

src/components/public/InteractiveArea.jsx

@@ -154,14 +154,16 @@ const InteractiveArea = ({ h5courseCode }) => {
         {interactiveList.map((item) =>
           item.isMyMessage ? (
             <div className='flex flex-row flex-grow items-start justify-end mb-4'>
-              <div className='flex flex-col text-right flex-grow break-all'>
-                <p className='font-bold '>
+              <div className='flex flex-col text-right flex-grow pl-14'>
+                <div className='font-bold pb-2'>
                   {item.name || item.userCode.substring(0, 6)}
-                </p>
-                <p className='bg-blue-500 rounded-lg px-4 py-2 text-white'>
+                </div>
+                <div className='bg-blue-500 rounded-lg px-4 py-2 text-white self-end text-left line-break-anywhere'>
                   {item.content}
-                </p>
-                <p className='text-gray-600 text-sm mt-1'>{item.createTime}</p>
+                </div>
+                <div className='text-gray-600 text-sm mt-1'>
+                  {item.createTime}
+                </div>
               </div>
               <img
                 src={
@@ -182,12 +184,14 @@ const InteractiveArea = ({ h5courseCode }) => {
                 alt='User avatar'
                 className='rounded-full w-12 h-12 mr-3'
               />
-              <div>
-                <p className='font-bold'>{item.name}</p>
-                <p className='bg-gray-300 rounded-lg px-4 py-2'>
+              <div className='flex flex-col text-left flex-grow pr-14'>
+                <div className='font-bold pb-2'>{item.name}</div>
+                <div className='bg-gray-300 rounded-lg px-4 py-2 self-start line-break-anywhere'>
                   {item.content}
-                </p>
-                <p className='text-gray-600 text-sm mt-1'>{item.createTime}</p>
+                </div>
+                <div className='text-gray-600 text-sm mt-1'>
+                  {item.createTime}
+                </div>
               </div>
             </div>
           ),

src/index.css

@@ -20,3 +20,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.line-break-anywhere {
+  line-break: anywhere;
+}

tailwind.config.js

@@ -1,70 +1,75 @@
 const { blackA, mauve, violet } = require('@radix-ui/colors');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    mode: 'jit',
-    content: [
-        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-        './src/app-pages/**/*.{js,ts,jsx,tsx,mdx}',
-    ],
-    theme: {
-        extend: {
-            maxHeight: {
-                '20vh': '20vh',
-                '70vh': '70vh',
-                // 添加其他需要的值
-            },
-            backgroundImage: {
-                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-                'gradient-conic':
-                    'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-            },
-            colors: {
-                ...blackA,
-                ...mauve,
-                ...violet,
-            },
-            keyframes: {
-                slideUpAndFade: {
-                    from: { opacity: 0, transform: 'translateY(2px)' },
-                    to: { opacity: 1, transform: 'translateY(0)' },
-                },
-                slideRightAndFade: {
-                    from: { opacity: 0, transform: 'translateX(-2px)' },
-                    to: { opacity: 1, transform: 'translateX(0)' },
-                },
-                slideDownAndFade: {
-                    from: { opacity: 0, transform: 'translateY(-2px)' },
-                    to: { opacity: 1, transform: 'translateY(0)' },
-                },
-                slideLeftAndFade: {
-                    from: { opacity: 0, transform: 'translateX(2px)' },
-                    to: { opacity: 1, transform: 'translateX(0)' },
-                },
-                hide: {
-                    from: { opacity: 1 },
-                    to: { opacity: 0 },
-                },
-                slideIn: {
-                    from: { transform: 'translateX(calc(100% + var(--viewport-padding)))' },
-                    to: { transform: 'translateX(0)' },
-                },
-                swipeOut: {
-                    from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
-                    to: { transform: 'translateX(calc(100% + var(--viewport-padding)))' },
-                },
-            },
-            animation: {
-                hide: 'hide 100ms ease-in',
-                slideIn: 'slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-                swipeOut: 'swipeOut 100ms ease-out',
-                slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-                slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-                slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-                slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-            },
+  mode: 'jit',
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app-pages/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      maxHeight: {
+        '20vh': '20vh',
+        '70vh': '70vh',
+        // 添加其他需要的值
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      colors: {
+        ...blackA,
+        ...mauve,
+        ...violet,
+      },
+      keyframes: {
+        slideUpAndFade: {
+          from: { opacity: 0, transform: 'translateY(2px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
         },
+        slideRightAndFade: {
+          from: { opacity: 0, transform: 'translateX(-2px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
+        },
+        slideDownAndFade: {
+          from: { opacity: 0, transform: 'translateY(-2px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
+        },
+        slideLeftAndFade: {
+          from: { opacity: 0, transform: 'translateX(2px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
+        },
+        hide: {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
+        slideIn: {
+          from: {
+            transform: 'translateX(calc(100% + var(--viewport-padding)))',
+          },
+          to: { transform: 'translateX(0)' },
+        },
+        swipeOut: {
+          from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
+          to: { transform: 'translateX(calc(100% + var(--viewport-padding)))' },
+        },
+      },
+      animation: {
+        hide: 'hide 100ms ease-in',
+        slideIn: 'slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        swipeOut: 'swipeOut 100ms ease-out',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade:
+          'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideDownAndFade:
+          'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade:
+          'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      },
     },
-    plugins: [],
-}
+  },
+  plugins: [],
+};