javascript - 在react中寫行間樣式的whiteSpace不生效
問題描述
react中給元素加上行內樣式,別的生效,唯獨whiteSpace不生效,有沒有辦法解決?目的是做文字溢出時用
<span style={{ fontSize: ’14px’, paddingTop: ’1px’, fontFamily: ’微軟雅黑’, maxWidth: ’56px’, overflow: ’hidden’, textOverflow: ’ellipsis’, whiteSpace: ’nowrap’ }}> {node.title} </span>
瀏覽器中樣式顯示的是
element.style { font-size: 14px; padding-top: 1px; font-family: 微軟雅黑; max-width: 56px; overflow: hidden; text-overflow: ellipsis;}
跪求指教,謝謝給為大神
問題解答
回答1:display: inline-block;
回答2:因為是iframe中樣式,所以只能寫行內樣式.但是試了很多中方式,white-space:nowrap都無法使用.包括升級到最新的react版本.最后的解決方式是:
<span style={{ fontSize: ’14px’, paddingTop: ’1px’, fontFamily: ’微軟雅黑’, maxWidth: ’56px’, overflow: ’hidden’, textOverflow: ’ellipsis’, whiteSpace: ’pre’ }}> {node.title} </span>
不知道為何nowrap屬性無法使用,但是用pre屬性就完美解決了.
回答3:https://github.com/facebook/r...
nowrap was deprecated in HTML4 and is not a part of HTML5. I strongly suggest using CSS instead.
相關文章:
1. vue.js - vue 打包后 nginx 服務端API請求跨域問題無法解決。2. css3 - css如何實現素描描邊效果3. java - Mybatis關聯查詢4. docker綁定了nginx端口 外部訪問不到5. PHP單例模式6. css - transform-origin 旋轉參考點7. javascript - ndoe 如何讀取mac系統下.numbers文件,或者解析.numbers文件的庫8. css3 - flex兩端布局9. javascript - 如何更改瀏覽器默認字體大小10. html - 在一個table表單中 td用v-for 使用v-if判斷是否顯示 然后用一個外部的button 判斷點擊最后一行隱藏
