跨度中单词结尾的 CSS 不正确

Question

>我有一个有一行两列的表，在第二个"td"中我有很多分隔的单词，所以我把它们一个接一个地放在一个"span"中，
可能有一个很长的顺序span元素，我想设置一个scroll-x
跨度是内联的，但词尾是粘连形式，例如："دفترچه"是正确的，但"دفترچهـ"不是
当我将显示更改为表格单元格时似乎是正确的，但我错过了一些其他样式表，例如作为边距
我的错误是什么，我该如何解决？

https://jsfiddle.net/L44vmbh8

*{
padding: 0px;
margin: 0px;
border: 0px;
direction:rtl;
}
.item td div{
overflow-x: scroll;
width: 75vw;
height:55px;
}
.item td div span{
background-color: #00ff26;
margin: 5px;
padding: 5px;
display: inline;
}
.item>div{
max-width: 82vw;
border-radius: 15px;
background-color: rgba(0,0,0,.2);
padding: 5px;
}

<div class="item">
        <div>
        <table>
            <tr>
                <td>نام:</td>
                <td><div><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span></div></td>
            </tr>
        </table>
        </div>
</div>

Answer 1

这是我修改您的 HTML 和 CSS 后的屏幕截图https://i.stack.imgur.com/vXq8o.jpg

更新：

我在第一列中添加了垂直对齐"顶部"。作为参考，您可以访问 http://www.w3schools.com/