自定义div内的文本换行

Question

基本上发生的事情是我想在我的文本包装中添加一些样式，我正在寻找的样式是在文本换行后缩进，所以例如，文本将如下所示：

This is text that should be 
    wrapped.

但目前看起来像这样：

This is text that should be 
wrapped.

此外，我正在尝试弄清楚如何正确禁用聊天区域中的左右滚动条，并为 ＆＃34;单词＆＃34;应用文字换行。 没有任何空格。以下示例

当前:(应用水平滚动）

oejgoewgomgepoegwmopewjopvwemxdivheiwvmewcmoewmvnvpoewcewocmewinvew

需要：

oejgoewgomgepoegwmop
    ewjopvwemxdivhei
    wvmewcmoewmvnvpo
    ewcewocmewinvew

我已提供图片，向您展示我目前拥有的以及我在下面寻找的内容

我有什么：

我想要的是什么：

查看堆栈溢出显示设置

    overflow-y: scroll;

属性只会水平显示滚动条，但似乎并非如此。

如果您需要我的div的CSS，请在下面填写：

#chatBoxDiv {
    position: absolute;
    background: white;
    height: 20%;
    width: 29%;
    left: 1%;
    bottom: 6%;
    opacity: 0.6;
    font-size: 12px;
    overflow-y: scroll;
}

Answer 1

您要找的是word-break: break-all用于打破长字符串，text-indent: -15px;和padding-left用于缩进：

#chatBoxDiv {
    height: 100px;
    width: 200px;
    font-size: 12px;
    overflow-y: scroll;
    word-break: break-all;
    padding-left: 15px;
    text-indent: -15px;
}

<div id="chatBoxDiv">oejgoewgomgepoegwmopewjopvwemxdivheiwvmewcmoewmvnvpoewcewocmewinvew</div>

Answer 2

像这样：

#chatBoxDiv
    margin-left:40px;
    text-indent:-40px;
}

Working example

Answer 3

自动换行：break-word; 文本溢出：省略号;