I have trouble in my own WP theme. At the front page, I'm displaying 3 last articles. When the title is static (for ex. Lorem ipsum dolor sit amet), the title correctly continue to next row if some word could overflow. But when dynamically outputting the title from db, the title just overflow the line width, not continuing on second row.
For displaying the title from db I use WP function the_title();.
Why is this happening? And how can I fix it?
Thanks.
This issue could be happening because the titles you're retrieving from the database have varying lengths and font sizes, which may cause some titles to overflow the line width and not continue on a second row.
To fix this, you can try adding the following CSS styles to your WordPress theme:
.title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
This will cause any title that exceeds two lines to be truncated with an ellipsis ("...") and not overflow the line width.
You can also adjust the -webkit-line-clamp value to specify how many lines of text you want to display before truncating the title.
Related
In this codepen Vuetify demo, I'm using a two column layout. The first column has a <v-list> inside a green <v-alert>. If you click the "toggle text" button, the title of the first item in the list toggles between short and long.
When the text is long, it overflows the <v-alert> and runs into the adjacent column
How can I prevent this? I would ideally like the text to be truncated with ellipsis once it reaches the edge of the green <v-alert> or if that is not possible, for the text to wrap over multiple lines within the alert.
I've tried adding the following class to the text, but it doesn't prevent the overflow
.prevent-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
If you want the text to not over flow the green container, you need to set the overflow there.
<v-alert text color="success" class="prevent-overflow">
will be where you aim.
Just to be clear, overflow sets on the contained items, when you set an over flow to your div, what you mean is - I want whats inside of this div to act like this if it goes beyond it.
For the ellipsis you will need to set 2 things, 1 is on the title add text-over: ellipsis, no need in word wrap and all, it will just cause the text to go down, unless thats what you want.
Second thing is to set width to the div that holds the text directly.
In your case for a quick fix you can do for example:
.v-list-item__title {
width: 20px;
}
.prevent-overflow2 {
text-overflow: ellipsis;
}
I'm going to jump straight to the point with giving you the example fiddle, the problem will make itself clear. Instructions: click on the paragraph in order to change its textual content (via javascript) and then input something a bit longer (like 150+ chars) but as a single word. For example, replace the initial content with a text like LONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXT... etc and you'll see the table stretches in a very strange way, although I've set max width and height for my paragraph and made overflow scrollable. I'd like to know what's causing that and what would be the best way to prevent it. Thanks in advance!
https://jsfiddle.net/aekjguj2/1/
The paragraph needs one more thing: word-break: break-all.
<p id="description_changer" class="clickEdit"
style="max-width: 100%; max-height: 100px;
overflow-y: scroll; word-break: break-all;">
Click to dynamically replace me with a long single word content
</p>
I'm new to this forum so hello to all.
I'm working on a WordPress website theme called tesseract. I am new to WordPress so have limited experience working with it.
The problem I'm experience is with the menu at the top of the page. If you visit www.avoinvents.co.uk and take a look you'll see that the categories don't sit on the same line. If I remove one of the categories the page looks much nicer and neater. All categories are necessary so I could not delete any.
Could anyone on here suggest how I make the necessary changes to fix the menu.
Many thanks
Here's the CSS that I changed in my browser to make the menu appear in all one line:
#masthead {
padding-top: 10px;
padding-bottom: 10px;
}
#site-banner-left {
width: 100%;
}
The main problem was that the site-banner-left CSS definition had a width of 60%, causing the text to wrap around its border, so I changed its width to 100% and added the padding to make the navigation area a little bigger. If this messes with other parts of the theme, try making the text size of the site-banner-left definition smaller instead of changing its width. Hope this helps.
You have limited the available width because an ancestor element, #site-banner-left, has a width of 60%. Increase this value or remove this rule to allow the entire menu to fit naturally.
Additionally, since the menu items are inline-block elements, you can force them to be on one line by setting the parent element's white-space to nowrap:
.nav-menu {
white-space: nowrap;
}
Is there a way to get the size of an element inside an AbstractCell automatically when the cell is rendered?
The cells I'm rendering, contain a paragraph that can be collapsed by applying
.collapsed {
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 60px;
}
and expanded by removing the collapsed style.
Depending on whether the paragraph is collapsed or not, a "read more" / "read less" anchor is added respectively using css.
However, when a paragraph isn't overflown, it's still showing the "read more" anchor that I don't want to display because there isn't anything more to read.
AbstractCell doesn't have an onLoad() or onRander() function, so is there another way to get the paragraph's size after it is loaded?
Any other suggestions about how to tackle this issue are welcome too.
After you update your table, you can iterate through all cells and get the width of their content. Just remember to wrap this into a Scheduler. Otherwise you may get all zeros because this code will be executed too fast - before the browser had a chance to render the cells.
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
// update your cells
}
});
You can read more about Scheduler here.
With the exception of the content in the slides, I have the same slider on this test site as a I have on this site, and both of these sites are running the latest WordPress installation.
For some reason, I've noticed that the <ul class="slides"></u> on the latter site (not the test site) has extra space at the bottom, before the clearfix. The space is not coming from the list items. The extra space is much more noticeable on mobile browsers than desktop. I don't know what is causing it, or how to get rid of it.
It's becаuse you have very long title on a second last slide (Random Midday Hotness: Winter Is Coming, So Scoot A Little Closer, Baby.), which occupies two lines
You may cut a title by adding this:
.headline {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}