以文本中間爲中心的動態div

我發現了與此問題有關的幾個關於stackoverflow的問題，但我的解決方案有點獨特，我一直無法找出解決方案。我也不是一個CSS專家，去圖。以文本中間爲中心的動態div

我的情況是這樣的：我有一個必須有以下限制顯示的DIV中的字符串：

使用下面的字符串作爲一個例子：「敏捷的棕色狐狸跳過懶惰的狗，一次又一次。」

中間的文本必須在div中間對齊。
Div可以100％寬，但必須限制爲一行。如果窗口太小，文本的截斷應該發生在任一側，但文本的中心必須始終可見。例如，如果窗口太小，div內容可能是：「over the」，其餘部分在任一側被截斷，依此類推。

什麼CSS可以幫助我實現這一目標？我曾嘗試以下無濟於事：

<html> 
<head> 
<style type='text/css' > 
    div { 
     width:100%; 
     border:solid 1px black; 
     text-align: center; 
     vertical-align:middle; 
     display: table-cell; 
     white-space:nowrap; 
     overflow:hidden; 
    } 
</style> 
</head> 
<body> 
<div> 
The quick brown fox jumps over the lazy dogs, again and again as well too. 
</div> 
</body> 
</html>

這裏的動機是，我想創建一個移動Web應用程序，將顯示一個列表中的某些搜索結果。搜索文本將始終高亮顯示，並且我想確保它始終在列表中可見。因此，如果搜索查詢是「懶狗」，我無法將整個搜索結果放在一行中，所以我需要將它放在一個寬度爲100％的div中，中間顯示的是「懶狗」文本被截斷在任何一方。

因此，用戶可能會在列表中看到類似這樣的結果之一。（其中「...」是沒有必要的，這裏顯示的澄清）：

...的懶惰的狗，再次...

此外，當用戶切換橫向和縱向的設備方向，該列表項應該優雅地顯示並顯示更多文本。

我相信有一個優雅的CSS方式來做到這一點，而不是我現在正在考慮的凌亂的JavaScript路線。

請讓我知道，如果我可以提供任何澄清，或者如果有另一種方法來實現我想要做的。或者，這可能不是一個好的UI設計選擇？

一如既往，任何幫助非常感謝！

謝謝！

穆罕默德

來源

2013-05-11 Mohammad

[此鏈接]（https://coderwall.com/p/oo2bqg）甚至可能在你的例子是利益 – JAM 2013-05-11 01:01:18

，寫着「懶惰的狗「不在線路中間。你真的希望結果集中在這些詞上。真的，這不是CSS的工作。這更像是一個編程問題。而TBH，我並不熱衷於隱藏和無法訪問文本的想法。 – 2013-05-11 04:06:30

嘗試#id-of-div { width: auto; } body { text-align: center; overflow-x: hidden; } 我不正是明白你的意思，或者如果它會工作，但嘗試也無妨。

來源

2013-05-11 16:06:42

div { 
    margin:0 -50% 0 -50%; 
    text-align: center; 
    border: 1px solid black; 
    overflow: hidden; 
    width: 100%; 
    position:relative; 
    left: 50%; 
} 
span { 
    width: 100%; 
overflow:hidden; 
    position:relative; 
    margin: 0 -50%; 
white-space:nowrap; 

}

具有以下HTML：

<div> 
<span>The quick brown fox jumps over the lazy dogs, again and again as well too.</span> 
</div>

來源

2013-05-12 09:26:05

這正是我正在尋找的 - 謝謝！ – PeterDNCO 2015-09-13 03:22:33

以文本中間爲中心的動態div

回答

相關問題