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

Question

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

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

并且我尝试了所有其他样式来换行，并且 none 正在工作。 preview

我用的是vuejs，但我怀疑这与它有什么关系。我尝试了我能找到的一切，但 none 有效。我不知道 parent 是否需要为此设置任何样式？谁能帮帮我？

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

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

word-break: break-all

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

Demo here

Answer 2

删除丢失的 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

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

HTML <P> is not overflowing to newline

html

css

word-wrap

kanban

vue.js