使用css引用文本位置

現在我正在努力在舊模板中插入一個新元素，並且遇到了一些問題。基本上有一些已經定義的CSS規則在其他地方，使我很難準確地定位我的div我想。使用css引用文本位置

是否有可能以某種方式引用表示文本實際呈現位置的div？實際上，如果解決方案使用的是javascript或css，我其實不在乎，但從邏輯上來說，css看起來像是這個功能的正確位置。

例子：

<div> 
    <div style="text-align:right">Content</div> 
</div>

在該示例中會有一個大的div跨越頁面的寬度，但我真的只是想要的東西，直接與該文本實際上存在比較小的區域交易。這可能嗎？

具體而言，我期望做的是確保我添加到現有模板（思考導航選項卡）的新類型的元素將是非常模塊化的。我希望能夠爲這些標籤使用非常不同的描述長度，並且能夠在不需要事先了解它們的DOM父母的情況下將背景應用到它們（我可以在其中添加任何新的內容，但是當前的佈局意味着這將需要工作在一些隨機div內，也在一定的隨機跨度內）

來源

2013-07-25 Slater Victoroff

我想你可以用jQuery來做到這一點。 –

CSS只能影響元素。你可以將文字包裝在''之類的東西里。如果你準確地描述你想要做什麼，這將會有所幫助，因爲你假設你需要這種能力可能是不準確的。 – Pointy

@Pointy公平點，更具體的使用案例 –

我感到深深的傻這件事，但我會繼續前進，在張貼此答案的情況下，其他人搜索這個未來。實際上，jQuery爲此提供了一個簡單的解決方案。

例子：

<div> 
    <div id="id" style="text-align-right">Some Text</div> 
</div> 

$(document).ready(function(){ 
    $("#id").wrapInner("<span id=renderedTextWrapper" />); 
    $("#renderedTextWrapper").//do whatever you want with it 
}

一旦你得到了這個元素是很容易做任何你喜歡的。爲了解決不得不將這個問題插入到隨機DOM位置的問題，我只是將文本包裝在一個div中，並確保它在傳遞給模板時不會被轉義。

來源

2013-07-25 16:10:15

你不能在html元素內對文本進行定位，只能針對元素本身。然後，你可以（如果你想走這麼遠）計算元素的大小，找到它的位置和文本對齊，並做數學計算出你的新插入元素的位置。您理論上可以計算元素中的字符，獲取字體大小並以像素爲單位計算它們的長度。我不能證明的計算，因爲你沒有提供您的業務規則

<div> 
    <div style="text-align:right">Content</div> 
</div> 

<script> 
function insertNewElement(element, newElement){ //element is a jquery object referencing the element you're inserting against and newElement is the one you're inserting 

    var offset = element.offset() 
    var alignmnet = element.css("text-align") 
    var parent = element.parent(); 
    //now do the calculations you need to and adjust the newElement's css 
    parent.append(newElement); 

} 

</script>

來源

2013-07-25 15:03:30 Brad

如果我錯了，請糾正我，但如果我在渲染頁面後調整了窗口大小或移動了文本，那麼這種方法會不會中斷？另外考慮我的業務規則靈活。我並不關心如何實現這種效果，只要它足夠健壯即可插入某個半任意DOM位置並仍能正常工作。 –

如果你考慮它的話。你必須聽取窗口的大小調整或移動元素然後重新計算。由於原始元素處於文檔流程中，並且在某種意義上說是您的參考點，因此您可以一般性地編寫計算，以便每次調用FN時都會正確調整它。說，它當然有很多工作，你必須權衡的好處 – Brad

呃，這是可行的，我覺得必須有一個解決方案，不是這個搖搖晃晃的，但。我也懷疑這些計算可能實際上是跨瀏覽器強健地完成的。你能舉一個例子嗎？ –

使用css引用文本位置

回答

相關問題