Vue点击事件添加文本出现文本溢出

Vue点击事件添加文本出现文本溢出

浏览器显示如下：

代码如下：

 <template>
 	<h2 class="title" ref="titleRef">{{ message }}</h2>
   	<button @click="addContent">添加内容</button>
 </template>

<script>
import { ref} from 'vue'
export default {
  setup() {
    const message = ref('哈哈哈哈哈')
    const titleRef = ref(null)
    const addContent= () => {
      message.value += 'hahahahahaha'
    }
    return {
      message,
      titleRef,
      addContent,
    }
  }
}
</script>

<style scoped>
.title {
  width: 120px;
}
</style>

点击事件触发

浏览器显示：

解决文本溢出方法：
CSS 添加 word-break: break-all; 或者 word-wrap: break-word;

.title {
  width: 120px;
  word-break: break-all;
}

.title {
  width: 120px;
  word-wrap: break-word; 
}

添加后的效果：