Html 如何防止跨距进入下一行响应性网络设计？

下面是一个简单的列表，其中每个h4的末端都有一个跨度

<ul class="items">
    <li>
        <h4>Prevent LineBreakOfPlus <span class="goto">o</span>
        </h4>
    </li>
    <li>
        <h4>Digital Signage <span class="goto">o</span></h4>
        … 

</ul>

最后一件事是这样的：

我遇到的问题是，当减小浏览器窗口的宽度时（我正在进行响应性网页设计），

span

-图标会进入下一行

对于如何防止这种情况发生，你有什么创造性的解决方案或想法吗

向您致以亲切的问候和感谢，

---

马特

当你有更少的空间时，减小你的字体大小。我猜您在最大宽度为480px的介质中遇到了问题。我发现减小字体大小是一个很好的选择，可以在响应性强的站点中保持设计的一致性

在空间较少时减小字体大小。我猜您在最大宽度为480px的介质中遇到了问题。我发现减小字体大小是一个很好的选择，可以在响应性网站中保持设计一致

如果您希望图标与文本行中的最后一个单词保持一致，您只需执行以下操作：

<ul class="items">
    <li>
         <h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
    </li>
    <li>
         <h4>Digital Signage<span class="goto">o</span></h4>
    </li>
</ul>

如果您的作品与

span

之间没有空格，则如果

li

元素被迫流入第二行，则主题将紧跟在单词后面

您可以使用

左边距

创建可视间距，或在

span

之前插入一个

实体，这有很多方法。细节取决于你想要什么效果

提琴：（两个如何做的例子）

保持图标右对齐

以下是将图标固定到

h4

元素右侧的一种方法：

.ex2.items h4 {
    position: relative;
    line-height: 1.5;
    outline: 1px dotted blue;
    padding-right: 2.00em;
}
.ex2.items .goto {
    background-color: wheat;
    line-height: 1.00;
    font-size: 1.6em;
    position: absolute;
    right: 0;
    bottom: 0.0em;
    height: 1.00em;
    width: 1.00em;
    outline: 1px dotted red;
}

使用

span

的绝对位置将其保持在

h4

的右侧和底部。如果

h4

形成第二行，图标将跟随第二行。您可能需要根据图标大小调整定位。如果您允许图标的大小增加，在极端情况下，您可能会遇到其他问题。我可能会将图标固定为

px

高度或宽度（或最大值）。最后，在

h4

中设置一些

padding right

，以防止窗口变小时图标与文本重叠

---

注意我明确指定了行高值，以突出不知道图标高度的问题。您可能需要调整这些设置以垂直定位图标。

如果您希望图标与文本行中的最后一个单词保持一致，只需执行以下操作：

<ul class="items">
    <li>
         <h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
    </li>
    <li>
         <h4>Digital Signage<span class="goto">o</span></h4>
    </li>
</ul>

如果您的作品与

span

之间没有空格，则如果

li

元素被迫流入第二行，则主题将紧跟在单词后面

您可以使用

左边距

创建可视间距，或在

span

之前插入一个

实体，这有很多方法。细节取决于你想要什么效果

提琴：（两个如何做的例子）

保持图标右对齐

以下是将图标固定到

h4

元素右侧的一种方法：

.ex2.items h4 {
    position: relative;
    line-height: 1.5;
    outline: 1px dotted blue;
    padding-right: 2.00em;
}
.ex2.items .goto {
    background-color: wheat;
    line-height: 1.00;
    font-size: 1.6em;
    position: absolute;
    right: 0;
    bottom: 0.0em;
    height: 1.00em;
    width: 1.00em;
    outline: 1px dotted red;
}

使用

span

的绝对位置将其保持在

h4

的右侧和底部。如果

h4

形成第二行，图标将跟随第二行。您可能需要根据图标大小调整定位。如果您允许图标的大小增加，在极端情况下，您可能会遇到其他问题。我可能会将图标固定为

px

高度或宽度（或最大值）。最后，在

h4

中设置一些

padding right

，以防止窗口变小时图标与文本重叠

---

注意我明确指定了行高值，以突出不知道图标高度的问题。您可能需要调整这些以垂直定位图标。

我在演示中模拟了它，但是它有点粗糙

.items {
    padding:0;
    margin:0;
    /*width:180px;*/
}
.items li {
    border: 1px solid red;
    list-style-type: none;
    position: relative;
}
.items h4 {
    margin:0; padding:0; font-size:16px; padding-right:10px;
}

.items .goto {
    margin-top: -10px;
    position: absolute;
    right: 0;
    top: 50%;
}

检查以下链接并减小浏览器的宽度

---

我已经在演示中模拟了它，但是它有点粗糙

.items {
    padding:0;
    margin:0;
    /*width:180px;*/
}
.items li {
    border: 1px solid red;
    list-style-type: none;
    position: relative;
}
.items h4 {
    margin:0; padding:0; font-size:16px; padding-right:10px;
}

.items .goto {
    margin-top: -10px;
    position: absolute;
    right: 0;
    top: 50%;
}

检查以下链接并减小浏览器的宽度

---

可以“防止”和“linebreakfplus”显示在两行中。或者它应该只有一行。你能把它放到JSFIDLE中吗please@MaheshSapkal它可以分成两行。但是，如果是这样，则加号不应与第二行分开。@Richlewis可以“阻止”和“LineBreakfplus”出现在两行中。或者它应该只有一行。你能把它放到JSFIDLE中吗please@MaheshSapkal它可以分成两行。然而，如果是这样的话，加号不应该与第二行分开。@Richlewis