大神們好
小弟有個小問題想請教
請問DATA內的陣列資料能否在不透過CSS的方式下換行呢?
如圖
我網頁目前呈現方式是UX Design一行文字，如果我想將顯示顯果改為兩行文字
Ux
Design
請問有辦法在不動用CSS&Html的的方式下讓data內的title換行嗎? 先謝謝各位前輩
已邀請的邦友 {{ invite_list.length }}/5
使用\r\n，搭配innerText(innerHTML會失敗)。
注意:在\r\n後面要再加一個 \
<html>
<body>
<p id="demo"></p>
<script>
const works = [
{
icon:'UX Design',
description:"abc def gg,\r\n\
ccc , dddddfggg dfafda, \r\n\
ddddfffgasfkljljklfajlfk,\r\n\
dfajfkljivm,jklfdajlkf.\
"
}
];
let getIcon = works[0].description;
document.getElementById("demo").innerText = getIcon;
</script>
大神晚安:
我在一樓補上了HTML的截圖
主要是我只想要修改我陣列內的其中幾個TITLE讓他們換行
並不用全部都換行，還有使用\r\n\，最後面的那個反斜線會一直被自動刪除，是因為語言的關係嗎?
使用暴力破解法XD
應該有更好的方法，交給其他大大了
let getTitle = work[0].icon.split(''); //轉成陣列
getTitle.splice(3, 1, '\r\n');//將\r\n取代UX後面的空白
let newString = getTitle.join('') //將陣列轉回字串
document.getElementById("demo").innerText = newString;
最好是改成一個function比較方便
const newTitle = function(index){
let getTitle = work[index].icon.split(''); //轉成陣列
getTitle.splice(3, 1, '\r\n');//將\r\n取代UX後面的空白
let newString = getTitle.join('') //將陣列轉回字串
return newString
}
document.getElementById("demo").innerText = newTitle(0);
至於那個反斜線會一直被自動刪除。
在程式碼，反斜線代表著字串分行。沒有反斜線就會像你的description，出現錯誤。
const string = '我是字串'
//程式碼中 如果字串過長 想分行 就要這樣
const string = '我是\
字串\
'
再補充一個，如果不想用反斜線。
你的description應該是要改成樣板字串.
const works = [
{
icon:'UX Design',
description:`abc def gg,
ccc , dddddfggg dfafda,
ddddfffgasfkljljklfajlfk,
dfajfkljivm,jklfdajlkf.
`
}
];
不然應該是會報錯。
如果你可以改data
就將data 裡的icon改成'UX\r\nDesign'就好了
const works = [
{
icon:'UX\r\nDesign'
}
];
想顯示\n跳行
可以用<pre>標籤
iThome鐵人賽
看影片追技術