如何修改代码使移动端歌曲标题与桌面端保持单行显示？

本人无技术背景，希望修改网站热门页面（trending page）的代码，让歌曲标题在移动端显示为和桌面端、平板端一致的单行样式。自己尝试修改了部分代码但没成功，附上移动端、桌面端截图及当前CSS代码，请求协助解决。

显示效果截图 #

• 移动端：
• 桌面端：

当前使用的CSS代码 #

.home_trending {
    background: #fff;
    padding: 25px;
}
.inner_home_trending:nth-child(2n+1) {
    clear: left;
}
.home_inner_details {
    width: 70%;
    display: inline-block;
    vertical-align:middle;
    padding-left: 15px;
}
.home_p p {
    margin: 0px !important;
}
.home_p .module-head {
    border-top: 6px solid #7464f2;
    border-radius: 3px;
}
.img_back .header img,
.movie_fream img,
.main-post img{
        background-image: url(https://themusicalsafari.com/wp-content/uploads/2020/07/border.jpeg);
    background-size: cover;
   padding: 25px 25px;
    background-position: center;
    background-repeat: no-repeat;
}
.textwidget .main-post img,
.music_img .main-post img {
    padding:17px;
}

.home_inner_details h2 {
    font-size: 18px;
        padding-bottom: 5px;
}
.home_inner_details a {
    color: #333;
    font-weight: 600;
}
.inner_number {
    width: 10%;
    display: inline-block;
    vertical-align:middle;
        text-align: left;
    font-size: 18px;
    color: #ccc;
    font-weight: 700;
}
.inner_img {
    width: 18%;
    display: inline-block;
    vertical-align:middle;
}
.music_img .header {
    padding: 15px;
}

.img_back .main-post h2.entry-title {

    margin-right: 15px;
}
.img_back .main-post .entry-title,
.img_back .main-post  .post-meta.vcard{
    display:block;
    vertical-align: middle;
}
.inner_home_trending {
    width: 50%;
    float: left;
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.main_meta_val p {
    color: #666;
}
.main_meta_val span {
    font-weight: 600;
}
.ly_text_center{
    text-align:center;
        margin-top: 20px !important;
}
.post_col_movies a.viewmore {
    text-align: center;
    width: 100%;
    display: block;
    color: #28aaab;
}
.movie_block .post-content span {
    width: 100%;
    text-align: center;
    display: block;
}

添加以下CSS代码到你的样式表中，即可实现移动端歌曲标题单行显示：

/* 移动端适配：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
    /* 调整热门条目为单列布局，避免两列挤压空间 */
    .inner_home_trending {
        width: 100%;
        float: none;
    }
    /* 确保标题容器有足够宽度，不被序号和图片挤压 */
    .home_inner_details {
        width: calc(100% - 10% - 18% - 30px);
    }
    /* 强制标题单行，超出部分显示省略号 */
    .home_inner_details h2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 16px; /* 可选：根据屏幕大小调整字体，避免标题过长 */
    }
}

代码说明 #

• @media (max-width: 768px)：仅在手机等小屏幕设备上生效，不影响桌面/平板端的原有样式。
• white-space: nowrap：禁止标题文本换行。
• overflow: hidden：隐藏超出容器的标题内容。
• text-overflow: ellipsis：超出部分用省略号代替，保持界面整洁。
• 调整.inner_home_trending为100%宽度：移动端两列布局会导致每个条目空间不足，单列更适配小屏幕。
• 计算.home_inner_details宽度：减去序号（10%）、图片（18%）和内边距的占用空间，给标题留出足够显示区域。

内容的提问来源于stack exchange，提问作者Musical Safari