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

Question

I try to create a kanban, and i have trouble getting text to overflow to the next line. I tried

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

and i tried all other styling for breaking to a new line, and none are working. preview

Iuse vuejs, but i doubt this has anything to do with it. I tried everything i could find, but none works. I dont know if the parent needs any styling set for this to work? Someone who can help me out?

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;
        }
    }
}

and 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

after removing the missing mixin your example wraps properly, so the issue probably stems from something outside of what you've shared.

that being said...

• the <i> is not a self closing tag and this could be causing some of your problems.
• using an absolute positioned empty <span> to create a border is not the best solution and could cause more problems

see if this works better for you:

<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

You need to add width to parent HTML attribute, in your case <div> and add this CSS property to your <p>

word-break: break-all

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

Demo here