Vue:v-text tag wrapping display problem

in different running environments of Centos and Windosw, v-text line wrapping shows an exception

currently, in the json data processing requested by ajax, you want to judge different systems according to the requested useragent and force line breaks (although this is possible, but do not want to do so)

In the

Windows system, each line ends with "< enter > < newline >", that is, "rn"; in the
Mac system, each line ends with "< enter >", that is, "r".
and UNIX/Linux uses the newline character LF for the next line, that is, n

related codes

/ /

                    <div data-remodal-id="dialog-info" class="dialog-default">
                        <div id="dialog-info-content" class="dialog-content">
                            <div class="dialog-header">
                                <button data-remodal-action="close" class="remodal-close"></button>
                                <h3>{{title}}</h3>
                                <dl class="list-table list-table-50">
                                    <dt></dt>
                                    <dd>
                                        <time>{{item.date|formatDate}}</time>
                                    </dd>
                                    <dt></dt>
                                    <dd>
                                        <p v-text="item.title" style="word-break:break-all">
                                    </dd>
                                    <dt></dt>
                                    <dd>
                                        {{item.author}}
                                    </dd>
                                </dl>
                            </div>
                            <div class="dialog-body plane-html">
                                <div id="notice">
                                    <p style="white-space: pre-wrap; word-wrap:break-word;" v-text="item.message">
                                </div>
                            </div>
                        </div>

                        <div class="dialog-btn">
                            <a href="-sharp" data-remodal-action="close" class="btn"></a>
                        </div>
                    </div>

above is the code. Can v-text implement all kinds of newline symbol correspondence

Vue.js

Aug.28,2021

css

<br>message<br>message: '/rn/n /r' <br>v-html

<p v-html="text">
data () {
return {
  text:'<br/><br/> '
  }

}

because there is not much time, a common method is made to replace the newline characters in the string. It's a pity that we didn't use Vue to solve this problem

    <cffunction name="ConvertJSON_outer" access="public" returntype="any" hint="">
        <cfargument name="param" type="string" required="yes" default="" hint="" />
        
        <cfscript>
        var result = arguments.param;
        result = Replace(result, "\r\n" ,"\n", "all");//windows
        result = Replace(result, "\r" ,"\n", "all");//centos
        </cfscript>
        
        <cfreturn result />
    </cffunction>