Vue字符換行

臺(tái)接口返回json數(shù)據(jù)，里面有'\r\n'，但是輸出到vue不起作用。因?yàn)関ue換行是
前端接收需要定義為：

、應(yīng)用場(chǎng)景

左側(cè)一個(gè)導(dǎo)航欄寬度固定，右側(cè)內(nèi)容根據(jù)用戶瀏覽器窗口寬度進(jìn)行自適應(yīng)

二、思路

首先把這個(gè)問題分步解決，需要攻克以下兩點(diǎn)：

1、讓兩個(gè)div并排到一行

2、讓一個(gè)div寬度固定，另個(gè)div占據(jù)剩下寬度的空間

關(guān)于第一點(diǎn)，首先要明確，div屬于塊級(jí)元素，在文檔標(biāo)準(zhǔn)流中單獨(dú)占據(jù)一行。要想多個(gè)div在一行，就可以想辦法讓div脫離標(biāo)準(zhǔn)流，比如使用float或者absolute；

關(guān)于第二點(diǎn)，首先有一個(gè)寬度固定的div，另外自適應(yīng)的div寬度是多少？首先這個(gè)寬度不能寫“100%”，因?yàn)檫@里的100%是相對(duì)于第一個(gè)非靜態(tài)祖先元素的，也就是說如果這樣寫，頁(yè)面會(huì)出現(xiàn)整個(gè)頁(yè)面寬度+左邊固定列寬度的情形。那么對(duì)自適應(yīng)寬度的div處理方法是不去設(shè)置它的width屬性，瀏覽器會(huì)自動(dòng)計(jì)算后讓它占一行，接下來給他設(shè)置margin-left屬性把左側(cè)固定列空間空出即可。

三、實(shí)現(xiàn)

1、html

2、css

注：

1、fixedColumn 里注釋的方法即絕對(duì)定位的實(shí)現(xiàn)方式，取消注釋后把float那句注釋掉，可以實(shí)現(xiàn)相同的效果

2、使用float需要注意清除浮動(dòng)造成父元素塌陷的問題（這里不用清除，因?yàn)樽赃m應(yīng)列和固定列一樣高，在標(biāo)準(zhǔn)流中可以撐起父元素）

四、擴(kuò)展

如果把上面的問題稍微改變一下，要求展示一個(gè)左中右布局，而且左右固定，中間自適應(yīng)，這要如何實(shí)現(xiàn)呢？

估計(jì)很多人會(huì)這樣想：

css中.flexibleColumn樣式添加一個(gè)屬性：margin-right: 40px;

html中再追加一個(gè)固定列，在右側(cè)浮動(dòng)：

然后運(yùn)行的效果是...左中布局，右邊空白，瀏覽器出現(xiàn)滾動(dòng)條，右固定列換行后右浮動(dòng)了。

然后我們做一個(gè)小小的改動(dòng)——把剛才添加的右浮動(dòng)固定列的dom放到自適應(yīng)列前面，也就是說html的dom順序是左浮動(dòng)，右浮動(dòng)，自適應(yīng)的順序！html如下：

效果就“神奇”的實(shí)現(xiàn)了~

這里一個(gè)注意點(diǎn)就是：浮動(dòng)元素在dom中要在非浮動(dòng)元素的前面，否則非浮動(dòng)元素后面的浮動(dòng)元素會(huì)換行。

具體原理待研究..網(wǎng)上好像沒查到，有誰知道的話希望告知~

總結(jié)：一定要自己實(shí)現(xiàn)試試，注意只有固定列脫離了文檔流，自適應(yīng)列還在文檔流中！其他沒什么要說的了，但是應(yīng)該還有更好的方法，等我看到了一并總結(jié)過來~

想要學(xué)習(xí)更多的編程技術(shù)，不如選擇重慶IT培訓(xùn)，千鋒重慶100%面授式課程，拒絕視頻同步授課，拒絕雙元視頻班教學(xué)，拒絕直播授課，教師一對(duì)一指導(dǎo)學(xué)員做項(xiàng)目，全新打造“主流技術(shù)+前沿技術(shù)+企業(yè)級(jí)聯(lián)動(dòng)”教學(xué)課程，重新優(yōu)化和定義編程語言，采用最新版本技術(shù)開展教學(xué)，致力于為學(xué)員打造最牛的、最新的技術(shù)，助力學(xué)員拿下BAT級(jí)企業(yè)Offer。

千鋒重慶IT技術(shù)開發(fā)培訓(xùn)，讓你在同樣的起跑線，跑出不一樣的高度。

端--輸入框換行，高度自適應(yīng)

最近項(xiàng)目遇到一個(gè)說小不小說大不大的問題，輸入框要自動(dòng)換行，并且高度還得自適應(yīng)，我試了幾種方式，

1.input 輸入，input不能換行，上網(wǎng)查詢了說將css設(shè)為word-break: break-all; word-wrap:break-word;也是無效的。

2.div 設(shè)置contenteditable="true"屬性，這種方法可以實(shí)現(xiàn)輸入內(nèi)容自動(dòng)換行，并且自適應(yīng)高度，但是項(xiàng)目需要光標(biāo)從邊輸入，我試過text-align：right是無效的。所以這種方式也不行。

3.textarea，文本輸入框，想想這個(gè)應(yīng)該可以了吧，文本輸入框是可以內(nèi)容自動(dòng)換行，可是高度怎么都是固定的啊。我還是沒解決。百度吧，終于找到解決辦法啦。

最后遇到一個(gè)光標(biāo)在placeholder提示文字上面，解決辦法：#textarea::-webkit-input-placeholder{ padding-right: 4px;}

<!DOCTYPE html>

<html>

<head>

<style>

#textarea {

display: block;

margin:0 auto;

overflow: hidden;

width: 550px;

font-size: 14px;

height: 18px;

line-height: 24px;

padding:2px;

text-align: right;

}

textarea {

outline: 0 none;

border-color: rgba(82, 168, 236, 0.8);

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

}

</style>

</head>

<body>

var autoTextarea=function (elem, extra, maxHeight) {

extra=extra || 0;

var isFirefox=!!document.getBoxObjectFor || 'mozInnerScreenX' in window,

isOpera=!!window.opera && !!window.opera.toString().indexOf('Opera'),

addEvent=function (type, callback) {

elem.addEventListener ?

elem.addEventListener(type, callback, false) :

elem.attachEvent('on' + type, callback);

getStyle=elem.currentStyle ? function (name) {

var val=elem.currentStyle[name];

if (name==='height' && val.search(/px/i) !==1) {

var rect=elem.getBoundingClientRect();

return rect.bottom - rect.top -

parseFloat(getStyle('paddingTop')) -

parseFloat(getStyle('paddingBottom')) + 'px';

};

return val;

} : function (name) {

return getComputedStyle(elem, null)[name];

minHeight=parseFloat(getStyle('height'));

elem.style.resize='none';

var change=function () {

var scrollTop, height,

padding=0,

style=elem.style;

if (elem._length===elem.value.length) return;

elem._length=elem.value.length;

if (!isFirefox && !isOpera) {

padding=parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

};

scrollTop=document.body.scrollTop || document.documentElement.scrollTop;

elem.style.height=minHeight + 'px';

if (elem.scrollHeight > minHeight) {

if (maxHeight && elem.scrollHeight > maxHeight) {

height=maxHeight - padding;

style.overflowY='auto';

} else {

height=elem.scrollHeight - padding;

style.overflowY='hidden';

};

style.height=height + extra + 'px';

scrollTop +=parseInt(style.height) - elem.currHeight;

document.body.scrollTop=scrollTop;

document.documentElement.scrollTop=scrollTop;

elem.currHeight=parseInt(style.height);

};

addEvent('propertychange', change);

addEvent('input', change);

addEvent('focus', change);

change();

};

</script>

var text=document.getElementById("textarea");

autoTextarea(text);// 調(diào)用

</script>

</body>

</html>

在線咨詢

上一篇：Word2021中快速制作三線表，提高數(shù)據(jù)可讀性！
下一篇：jenkins 集成 fastlane 打包 iOS

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

Vue字符換行

端--輸入框換行，高度自適應(yīng)

您的項(xiàng)目需求