Having trouble with text overflow in a kanban board? I've tried various CSS styling options like overflow-wrap: break-word;, word-wrap: break-word;, and hyphens: auto;, but nothing seems to work. Here's a preview.
I'm using Vue.js, but I don't think that's the issue. Could it be something related to the parent elements needing specific styling for this to work properly? Can anyone provide some guidance?
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>Long sentence here to see if it fitsLong sentence here to see if it fitsLong sentence here to see if it fitsLong sentence here to see if it fits</p>
<p>Shorter sentence to test fit</p>
<p>Shorter sentence to test fit</p>
<p>Shorter sentence to test fit</p>
</div>
</div>
</template>
<script>
export default {
props: ['board'],
components: {
},
data () {
return {
scrollSettings: {
suppressScrollX: true,
wheelPropagation: false,
swipeEasing: true
}
}
}
};
</script>