如何在跨度中插入換行符？

現在我想打破Q1的路線並將此Q1移至摘要旁邊。有沒有辦法做到這一點？以下是該按鈕的CSS。

span { 
display: inline-block; 
font-size: 80%; 
line-height: normal; 
width: 100%; 
line-height: 2rem; 
border: 1px solid #019ed5; 
border-radius: 25px; 
cursor: pointer; 
}

來源

2015-06-30 Suhas Deshpande

只需使用
標籤 –

請發送完整的代碼示例。 – j08691

嘗試增加：

display: inline-block;

注意：它可能會改變行爲的位。

在HTML

：

<span>JAN-MAR <br /> Q1 Summary</span>

您也可以使用JS，更加動態的方法：

<span class="q-span">JAN-MAR Q1 Summary</span>

，你可以使用jQuery來做到這一點：

$(document).ready(function(){ 
    $(".q_header").each(function(){ 
     // Get content 
     var 
      content = $(this).text(), 
     // get first word 
      first_w = content.match(/([\w\-]+)/); 

     // replace the first word with first word and break 
     var new_cnt = content.replace(first_w[0], first_w[0] + "</br>"); 

     // add the css to make it inline-block 
     $(this).css("display", "inline-block").html(new_cnt); 

    }); 

});

來源

2015-06-30 03:22:23

假設內容「JAN-MAR Q1 Summary正在作爲字符串傳遞，並且是HTML模板中表達式的一部分，是否有其他方式？ –

可以依賴，第一個單詞後總會有一箇中斷嗎？它是一個你想要維護的特定字符數量？我們可以在其中添加一些js。在CSS中應用一個適合所有的解決方案取決於你是否知道內容總是遵循特定的格式。不同字符串的一些例子或者它們將會有的模式 –

我在這裏看到你的意思，所以內容總是採用相似的格式.JAN-MAR和Q1摘要之後的換行符總是在同一行上 –

使用

display:block;

或
span是一個內聯元素，因爲這樣的樣式屬性如width或margin不起作用。您可以通過將span更改爲塊元素（例如div）或使用填充來修復該問題。

來源

2015-06-30 03:45:49

讓我知道它是否也可以幫助你... –

顯示：在js黑客的幫助下進行阻擋。謝謝。 –

好的......謝謝你的回覆......並且爲你將來的編碼做好準備.....好吧，不斷地問這些有趣的問題...... –

如何在跨度中插入換行符？

回答

相關問題