HTML <P> 没有溢出到换行符

Question

我尝试创建看板，但无法让文本溢出到下一行。我试过了

overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;

我尝试了所有其他样式来换行，但没有一个有效。 preview

我使用 vuejs，但我怀疑这与它有什么关系。我尝试了我能找到的一切，但没有一个有效。我不知道父母是否需要任何样式设置才能工作？谁能帮帮我？

css:

.kanban-card {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    width: 100%;
    border-radius: calc(0.15rem - 1px);
    @include depth(1);
    background: $foreground-color;
    border: 1px solid darken($foreground-color, 10%);
    .kanban-type-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 28px;
        border-bottom-right-radius: 30px;
        background-color: $theme-color-1;
        i {
          color: #fff;
          position: absolute;
          top: 5px;
          left: 5px;
        }
    }
    .kanban-type-border {
        position: absolute;
        width: 3px;
        top: 0;
        bottom: 0;
        left: 0;
        background-color: $theme-color-1;
    }
    .kanban-content {
        display: block;
        width: 100%;
        overflow: hidden;
        text-indent: 1em;
        p {
            max-width: 200px;
            margin: 0;
        }
    }
}

和Vue：

<template>
<div class="kanban-card px-3 py-3">
    <span class="kanban-type-icon">
        <i class="simple-icon-bell" />
    </span>
    <span class="kanban-type-border"></span>
    <div class="kanban-content">
        <p>hier een lange zin om te zien of deze pastier een lange zin om te zien of deze pastier een lange zin om te zien of deze pastier een lange zin om te zien of deze past</p>
        <p>hier een lange zin om te zien of deze past</p>
        <p>hier een lange zin om te zien of deze past</p>
        <p>hier een lange zin om te zien of deze past</p>
    </div>
</div>
</template>
<script>
    export default {
        props: ['board'],
        components: {

        },
        data () {
          return {
            scrollSettings: {
              suppressScrollX: true, 
              wheelPropagation: false,
              swipeEasing: true
            }
          }
        }
    };
</script>

Answer 1

删除丢失的 mixin 后，您的示例可以正确包装，因此问题可能源于您共享的内容之外的内容。

这么说……

• <i> 不是自闭合标签，这可能会导致一些 你的问题。
• 使用绝对定位的空<span>创建 边框不是最佳解决方案，可能会导致更多问题

看看这是否更适合你：

<div class="kanban-card">
  <span class="kanban-type-icon">
    <i class="fa fa-bell"></i>
  </span>
  <div class="kanban-content">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
  </div>
</div>

.kanban-card {  
  background: $foreground-color; 
  position: relative;
  padding: 1.5em 1em;

  border-left: solid 3px $theme-color-1;
  border-top: solid 3px $theme-color-1;

  .kanban-type-icon {
      background-color: $theme-color-1;
      width: 2em;
      height: 2em;
      border-bottom-right-radius: 100%;
      position: absolute;
      top: 0;
      left: 0;
      i {
        color: #fff;
        margin-left: 6px;
        margin-top: 6px;
      }
  }
  .kanban-content {
      p {
        text-indent: 1em;
        margin-bottom: 1em;
      }
  }
}

Codepen Example

Answer 2

您需要为父 HTML 属性添加宽度，在您的情况下为 <div> 并将此 CSS 属性添加到您的 <p>

word-break: break-all

  <p style="width: 50px; word-break: break-all"> testefdsfsdfdsfsdfsdfdssdfsdfdsfdsfsdfsdfdfd</p>

Demo here