diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css
index b04fe4a4..c678a119 100644
--- a/src/components/Accordion/Accordion.module.css
+++ b/src/components/Accordion/Accordion.module.css
@@ -8,7 +8,9 @@
   align-items: center;
   justify-content: space-between;
   width: auto;
+  hyphens: auto;
   color: var(--color-text-main);
+  overflow-wrap: anywhere;
   cursor: pointer;
   background: none;
   border: 1px solid var(--color-border);
diff --git a/src/components/Box/Box.module.css b/src/components/Box/Box.module.css
index f7d70569..477829c4 100644
--- a/src/components/Box/Box.module.css
+++ b/src/components/Box/Box.module.css
@@ -5,8 +5,10 @@
   margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
   font-size: var(--text-size);
   font-weight: var(--text-bold);
+  hyphens: auto;
   line-height: var(--text-leading);
   color: var(--text-color);
+  overflow-wrap: anywhere;
   border-radius: var(--radius);
 }
 
@@ -77,3 +79,7 @@
 .box.textRight {
   text-align: right;
 }
+
+.box.textNoWrap {
+  white-space: nowrap;
+}
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index e7e3c9db..cf36dd16 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -56,6 +56,10 @@ type BaseProps = {
    * テキストの配置。指定しない場合、親要素の配置を継承
    */
   textAlign?: 'left' | 'center' | 'right';
+  /**
+   * 領域が狭い場合でも、テキストを折り返えさない
+   */
+  textNoWrap?: boolean;
 } & PaddingProps &
   MarginProps &
   RadiusProp &
@@ -177,6 +181,7 @@ export const Box: FC<PropsWithChildren<PropsWithoutText | PropsWithTextBody | Pr
   textColor,
   textBold,
   textAlign,
+  textNoWrap,
   ...props
 }) => {
   let _textVariables: CSSProperties = {};
@@ -197,6 +202,7 @@ export const Box: FC<PropsWithChildren<PropsWithoutText | PropsWithTextBody | Pr
         textBold && styles.textBold,
         textBold === false && styles.textNormal,
         textAlign && styles[`text${capitalize(textAlign)}`],
+        textNoWrap && styles.textNoWrap,
       ])}
       style={{
         ...paddingVariables({
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index fa2c6249..7762ae61 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -13,6 +13,7 @@
   margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
   font-size: var(--font-size);
   font-weight: bold;
+  hyphens: auto;
   line-height: var(--line-height);
   color: var(--text);
   text-align: center;
diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
index dbf412ff..37243164 100644
--- a/src/components/Checkbox/Checkbox.module.css
+++ b/src/components/Checkbox/Checkbox.module.css
@@ -2,6 +2,8 @@
   display: flex;
   gap: var(--size-spacing-xs);
   align-items: center;
+  hyphens: auto;
+  overflow-wrap: anywhere;
   cursor: pointer;
   user-select: none;
 }
diff --git a/src/components/ErrorMessage/ErrorMessage.module.css b/src/components/ErrorMessage/ErrorMessage.module.css
index f6de54ea..e1014404 100644
--- a/src/components/ErrorMessage/ErrorMessage.module.css
+++ b/src/components/ErrorMessage/ErrorMessage.module.css
@@ -1,6 +1,8 @@
 .error {
   margin: 0;
   font-size: var(--text-body-sm-size);
+  hyphens: auto;
   line-height: var(--text-body-sm-narrow-line);
   color: var(--color-alert);
+  overflow-wrap: anywhere;
 }
diff --git a/src/components/Heading/Heading.module.css b/src/components/Heading/Heading.module.css
index 4b328dd6..c9b462ef 100644
--- a/src/components/Heading/Heading.module.css
+++ b/src/components/Heading/Heading.module.css
@@ -2,7 +2,9 @@
   position: relative;
   box-sizing: border-box;
   font-weight: normal;
+  hyphens: auto;
   color: var(--color-text-main);
+  overflow-wrap: anywhere;
 
   --medium-leading-border-width: 4px;
   --large-leading-border-width: 5px;
@@ -203,3 +205,7 @@
   width: calc(var(--text-heading-xl-size) * var(--text-heading-xl-line));
   height: calc(var(--text-heading-xl-size) * var(--text-heading-xl-line));
 }
+
+.heading.noWrap {
+  white-space: nowrap;
+}
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
index 0d5e37d6..9d033093 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading/Heading.tsx
@@ -55,6 +55,10 @@ type Props = {
    * @default true
    */
   bold?: boolean;
+  /**
+   * ｚ
+   */
+  noWrap?: boolean;
 } & CustomDataAttributeProps;
 
 const Heading: FC<PropsWithChildren<Props>> = ({
@@ -70,6 +74,7 @@ const Heading: FC<PropsWithChildren<Props>> = ({
   id,
   htmlFor,
   bold = true,
+  noWrap = false,
   ...otherProps
 }) => {
   const className = clsx(
@@ -80,7 +85,8 @@ const Heading: FC<PropsWithChildren<Props>> = ({
     // For leadingBorder, only the main text colour is supported.
     leadingBorder ? styles.secondary : styles[color],
     leadingBorder ? styles.leadingBorder : null,
-    bold ? styles.bold : null,
+    bold && styles.bold,
+    noWrap && styles.noWrap,
   );
 
   return (
diff --git a/src/components/HelperMessage/HelperMessage.module.css b/src/components/HelperMessage/HelperMessage.module.css
index 08c04c26..4531edb4 100644
--- a/src/components/HelperMessage/HelperMessage.module.css
+++ b/src/components/HelperMessage/HelperMessage.module.css
@@ -1,6 +1,8 @@
 .message {
   margin: 0;
   font-size: var(--text-note-lg-size);
+  hyphens: auto;
   line-height: var(--text-note-lg-tight-line);
   color: var(--color-text-sub);
+  overflow-wrap: anywhere;
 }
diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css
index 28bcb1e8..9e9a0cf9 100644
--- a/src/components/Label/Label.module.css
+++ b/src/components/Label/Label.module.css
@@ -4,7 +4,9 @@
   align-items: center;
   font-size: var(--text-body-sm-size);
   font-weight: bold;
+  hyphens: auto;
   color: var(--color-text-sub);
+  overflow-wrap: anywhere;
 }
 
 legend.label {
diff --git a/src/components/LinkCard/LinkCard.module.css b/src/components/LinkCard/LinkCard.module.css
index 0bfc4c35..07ad6dfb 100644
--- a/src/components/LinkCard/LinkCard.module.css
+++ b/src/components/LinkCard/LinkCard.module.css
@@ -3,7 +3,9 @@
   gap: var(--size-spacing-sm);
   align-items: center;
   padding: var(--size-spacing-md);
+  hyphens: auto;
   text-decoration: none;
+  overflow-wrap: anywhere;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
 }
diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css
index 5f4612bc..28a4e8f7 100644
--- a/src/components/RadioButton/RadioButton.module.css
+++ b/src/components/RadioButton/RadioButton.module.css
@@ -9,6 +9,11 @@
   border-radius: 24px;
 }
 
+.text {
+  hyphens: auto;
+  overflow-wrap: anywhere;
+}
+
 .medium .icon {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/src/components/RadioCard/RadioCard.module.css b/src/components/RadioCard/RadioCard.module.css
index 2b31d551..7a6dbb8b 100644
--- a/src/components/RadioCard/RadioCard.module.css
+++ b/src/components/RadioCard/RadioCard.module.css
@@ -16,8 +16,10 @@
   padding: 16px 12px 16px 44px;
   font-size: 16px;
   font-weight: normal;
+  hyphens: auto;
   line-height: 23px;
   color: var(--color-text-main);
+  overflow-wrap: anywhere;
   vertical-align: text-top;
   cursor: pointer;
   background: #fff;
diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css
index c2439b63..361321ad 100644
--- a/src/components/Text/Text.module.css
+++ b/src/components/Text/Text.module.css
@@ -1,8 +1,10 @@
 .text {
   font-size: var(--font-size);
   font-weight: normal;
+  hyphens: auto;
   line-height: var(--leading);
   color: var(--color);
+  overflow-wrap: anywhere;
 }
 
 :where(.text) {
@@ -163,3 +165,7 @@
 .right {
   text-align: right;
 }
+
+.nowrap {
+  white-space: nowrap;
+}
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 39911410..4813c994 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -43,6 +43,10 @@ type BaseProps = {
    * テキストの配置。指定しない場合、親要素の配置を継承
    */
   textAlign?: 'left' | 'center' | 'right';
+  /**
+   * 領域が狭い場合でも折り返えさない
+   */
+  noWrap?: boolean;
 } & CustomDataAttributeProps;
 
 type BodyProps = BaseProps & {
@@ -137,6 +141,7 @@ export const Text: FC<PropsWithChildren<TextProps>> = ({
   type = 'body',
   leading = 'default',
   bold = false,
+  noWrap = false,
   color = 'main',
   children,
   id,
@@ -148,12 +153,13 @@ export const Text: FC<PropsWithChildren<TextProps>> = ({
       id={id}
       className={clsx(
         styles.text,
-        bold && styles.bold,
         styles[size],
         styles[type],
         styles[leading],
         styles[color],
         textAlign && styles[textAlign],
+        bold && styles.bold,
+        noWrap && styles.nowrap,
       )}
       {...props}
     >
diff --git a/src/stories/Box.stories.tsx b/src/stories/Box.stories.tsx
index 725c0a53..a3806d10 100644
--- a/src/stories/Box.stories.tsx
+++ b/src/stories/Box.stories.tsx
@@ -333,3 +333,37 @@ export const CustomDataAttribute: Story = {
     ...defaultArgs,
   },
 };
+
+export const TextWrap: Story = {
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <Stack spacing="md">
+        <Box {...args}>
+          <p>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </p>
+          <p>
+            industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown
+            printer took a galley of type and scrambled it to make a type specimen
+            booooooooooooooooooooooooooooooooooooooooooooook.
+          </p>
+        </Box>
+
+        <Box {...args} textNoWrap>
+          <p>noWrap</p>
+          <p>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </p>
+          <p>
+            industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown
+            printer took a galley of type and scrambled it to make a type specimen
+            booooooooooooooooooooooooooooooooooooooooooooook.
+          </p>
+        </Box>
+      </Stack>
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+  },
+};
diff --git a/src/stories/Heading.stories.tsx b/src/stories/Heading.stories.tsx
index adaa304a..b986e439 100644
--- a/src/stories/Heading.stories.tsx
+++ b/src/stories/Heading.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { UbieIcon, ThumbUpOutlineIcon, SetupIcon } from '@ubie/ubie-icons';
-import { Heading, Stack } from '../';
+import { Box, Heading, Stack } from '../';
 
 export default {
   title: 'Typography/Heading',
@@ -297,3 +297,52 @@ export const CustomDataAttribute: Story = {
     [`data-test-id`]: 'heading-custom-attribute',
   },
 };
+
+export const TextWrap: Story = {
+  render: () => (
+    <div style={{ width: '300px' }}>
+      <Stack spacing="md">
+        <Box border="gray">
+          <Heading>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </Heading>
+        </Box>
+
+        <div lang="en">
+          <Box border="gray">
+            <Heading>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an
+              unknown printer took a galley of type and scrambled it to make a type specimen
+              booooooooooooooooooooooooooooooooooooooooooooook.
+            </Heading>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="gray">
+            <Heading noWrap>
+              私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+            </Heading>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="gray">
+            <Heading noWrap>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an
+              unknown printer took a galley of type and scrambled it to make a type specimen book.
+            </Heading>
+          </Box>
+        </div>
+      </Stack>
+    </div>
+  ),
+};
diff --git a/src/stories/Text.stories.tsx b/src/stories/Text.stories.tsx
index 7d59f635..87158fdc 100644
--- a/src/stories/Text.stories.tsx
+++ b/src/stories/Text.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Text, Flex, Stack } from '../';
+import { Text, Flex, Stack, Box } from '../';
 
 export default {
   title: 'Typography/Text',
@@ -322,9 +322,58 @@ export const TextAlign: Story = {
 };
 
 export const CustomDataAttribute: Story = {
+  render: () => <Text date-test-id="some-id">Text</Text>,
+};
+
+export const Bold: Story = {
+  render: () => <Text bold>Bold</Text>,
+};
+
+export const Wrap: Story = {
   render: () => (
-    <Text date-test-id="some-id" bold>
-      Text
-    </Text>
+    <div style={{ width: '300px' }}>
+      <Stack spacing="md">
+        <Box border="gray">
+          <Text>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </Text>
+        </Box>
+
+        <div lang="en">
+          <Box border="gray">
+            <Text>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an
+              unknown printer took a galley of type and scrambled it to make a type specimen
+              booooooooooooooooooooooooooooooooooooooooooooook.
+            </Text>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="gray">
+            <Text noWrap>
+              私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+            </Text>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="gray">
+            <Text noWrap>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an
+              unknown printer took a galley of type and scrambled it to make a type specimen book.
+            </Text>
+          </Box>
+        </div>
+      </Stack>
+    </div>
   ),
 };