While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's also worth mentioning that I'm not very skilled in CSS.
Here's the scenario: I have a string within a div that needs to meet certain criteria when displayed:
For example, let's say we have the string: "The quick brown fox jumps over the lazy dogs, again and again."
- The middle of the text should align with the center of the div.
- The div can take up 100% of the width but should be limited to one line. If the window size is insufficient, the text should truncate on both ends while keeping the center visible. For instance, if the window is too small, the content of the div might appear as "over the", with the excess text cut off on either side.
Which CSS techniques can help me achieve this? I've experimented with the following code, but without success:
<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>
My aim is to develop a mobile web app that displays search results in a list format. The search term will always be highlighted, ensuring its visibility in the list. Even if the search result cannot fit onto a single line, it should still be contained within a div that spans 100% of the width, displaying the term in the middle with the excess text truncated on both sides.
Therefore, the user may see a result in the list like so (the "..." are for illustrative purposes):
... the lazy dogs, again...
In addition, when the user switches between landscape and portrait orientations on their device, the list item should smoothly adjust to display more text.
I believe there must be an elegant CSS solution for this challenge, rather than resorting to a cumbersome javascript workaround which I am currently considering.
If you need further explanations or know of alternative methods to achieve my goal, please do not hesitate to share your thoughts. Or maybe you think this approach to UI design is flawed from the start?
Any assistance provided would be greatly valued!
Thank you!
Mohammad