iT邦幫忙

0

請問前端大神們

hihi 2022-02-21 19:39:101809 瀏覽
  • 分享至 

  • xImage

大神們好

小弟有個小問題想請教

請問DATA內的陣列資料能否在不透過CSS的方式下換行呢?

https://ithelp.ithome.com.tw/upload/images/20220221/20143914uCSbcuxQQs.png
https://ithelp.ithome.com.tw/upload/images/20220221/20143914nfzx5HDDY2.png

如圖
我網頁目前呈現方式是UX Design一行文字,如果我想將顯示顯果改為兩行文字
Ux
Design

請問有辦法在不動用CSS&Html的的方式下讓data內的title換行嗎? 先謝謝各位前輩

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
greenriver
iT邦研究生 4 級 ‧ 2022-02-21 20:55:05
最佳解答

使用\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>
看更多先前的回應...收起先前的回應...
hihi iT邦新手 5 級 ‧ 2022-02-21 21:05:27 檢舉

大神晚安:
我在一樓補上了HTML的截圖
主要是我只想要修改我陣列內的其中幾個TITLE讓他們換行
並不用全部都換行,還有使用\r\n\,最後面的那個反斜線會一直被自動刪除,是因為語言的關係嗎?

greenriver iT邦研究生 4 級 ‧ 2022-02-21 21:23:08 檢舉

使用暴力破解法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;
greenriver iT邦研究生 4 級 ‧ 2022-02-21 21:32:44 檢舉

最好是改成一個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 = '我是\
字串\
'
greenriver iT邦研究生 4 級 ‧ 2022-02-21 21:40:45 檢舉

再補充一個,如果不想用反斜線。
你的description應該是要改成樣板字串.

const works = [
	{
    	icon:'UX Design',
        description:`abc def gg,
        ccc , dddddfggg dfafda,
        ddddfffgasfkljljklfajlfk,
        dfajfkljivm,jklfdajlkf.
        `    
    }
];

不然應該是會報錯。

greenriver iT邦研究生 4 級 ‧ 2022-02-21 21:47:54 檢舉

如果你可以改data
就將data 裡的icon改成'UX\r\nDesign'就好了

const works = [
	{
    	icon:'UX\r\nDesign'
    }
];   
0
Homura
iT邦高手 1 級 ‧ 2022-02-21 20:12:01

想顯示\n跳行
可以用<pre>標籤

hihi iT邦新手 5 級 ‧ 2022-02-21 20:42:46 檢舉

大大您好:
\n 不能達到我要的效果,因為只是多了個空格
假設不動到HTML跟CSS的前提下還有其他辦法嗎?

hihi iT邦新手 5 級 ‧ 2022-02-21 20:43:58 檢舉

不能用Pre包則是因為我html那裡顯示是用data.map Render出來的,有十個標題,我只希望其中的三個標題換行

Homura iT邦高手 1 級 ‧ 2022-02-21 21:28:13 檢舉

不太懂
我說的\n是原本的跳行....
pre全包你原本沒跳行就不會跳啊...

我要發表回答

立即登入回答