默认span的宽度是自适应内容的。
span标记的样式设定width属性：
<html>
<body>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>
加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句，span的宽度失效，会发现不会产生效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>
如果设置display:block，width属性生效，但是此时的span跟div一样了。 DIV会自动换行
span不是块级的所以其宽度是依据内容的多少而定，你必需要设定span为BLOCK这样才可以设置宽度！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<span style="width:80%; display:block; float:left; ">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>
如果设置display:inline-block，则span并列在同行，而且width属性生效。
元素display属性的常见值说明：
block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。
inline：内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non：隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间。
设置 span 宽度的完美解决方案 （不自动换行）
|
下面代码的 CSS定义完美解决了span的宽度设置问题。代码可以同时兼容IE\FF各种版本。
<style type="text/css">
span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
</style>
|
分享到：
相关推荐
可以使用媒体查询（`@media`）或者CSS框架（如Bootstrap）来调整布局，确保在小屏设备上标签能自动换行。 7. **性能优化**： 当大量动态添加标签时，需要注意性能问题。尽量减少DOM操作，可以使用`...
本文将深入探讨如何解决`TextView`自动换行导致的排版问题，并允许我们设置`SpannableString`以实现更多样化的文本效果。 首先，理解`TextView`的换行机制至关重要。`TextView`默认会根据其宽度自动进行文本换行，...
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。 原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个...
然而，由于`span`元素的默认行为是`display:inline`，这意味着它不能直接接受宽度（width）和高度（height）属性的设置，这往往给开发者带来困扰，特别是当他们希望`span`元素具有特定尺寸时。标题和描述中提到的...
以下是三种将Span标签设置为固定宽度的方法： 1. **独立行的Span标签** 当Span标签单独占据一行时，可以将其display属性设置为block，使其行为类似于一个块级元素。例如： ```css span { width: 60px; text-...
在Android开发中，文本绘制和自动换行是一个常见的需求，特别是在自定义视图或者复杂的UI设计中。`StaticLayout`是Android系统提供的一个类，它主要用于帮助开发者在Canvas上高效地绘制多行文本并实现自动换行。这篇...
然而，由于`<span>` 默认是内联元素，它的宽度不能直接设置，因为内联元素会尽可能地在一行内显示其内容，而不考虑宽度属性。但在某些情况下，我们可能需要将`<span>` 设置为固定宽度，以满足特定的布局需求。以下是...
总而言之，要解决<span>标签块状不换行的问题，关键在于对display属性的灵活运用。通过不同的display值，我们可以控制<span>的布局行为，使页面的元素排布更加灵活和丰富。在设计网页时，我们需要根据具体内容和布局...
这样的元素既不强制换行，又能接受宽度和高度的设置。 示例代码： ```css span { display: inline-block; width: 100px; /* 设置宽度为100像素 */ } ``` 需要注意的是，使用`display: inline-block;`可能会有不...
在标题"设置span宽度高度的方法"中，我们要讨论如何为`<span>`元素设定特定的宽度和高度，以扩展其基本功能。 首先，让我们了解`<span>`的基本属性： 1. **内联元素**：`<span>`元素是内联元素，这意味着它不会...
将`word-wrap`设置为`break-word`，并保持`word-break`为`normal`，这样当单词过长或者容器宽度不足以容纳整个单词时，浏览器会自动在单词内部添加换行。例如： ```css p { word-wrap: break-word; word-break: ...
然而，这也有一个副作用，即会导致`<span>`元素前后自动换行，从而不连续地显示文本。这种解决方式并不是最优的，因为它改变了`<span>`元素的显示特性，违背了我们使用`<span>`而不是`<div>`的初衷。 另一个可能的...
起初设定为`normal`，意味着浏览器会合并多个空白字符为一个，但随后改为了`nowrap`，这意味着文本不会自动换行，这对于保持文本在一行内显示并触发溢出效果至关重要。 3. **`overflow`**：该属性定义了如何处理...
然而这种方法会导致<span>元素前后各形成一个换行，就像它是一个元素一样，这可能并不是开发者所期望的。 2. 另一个解决方案是使用display:inline-block属性。这种设置可以让<span>保持在行内，同时允许开发者为其...
通过以上方法，你就能有效地解决GridView控件中内容的换行问题，让数据展示更加清晰易读。在实践中，不断尝试和优化，才能找到最适合你的解决方案。记住，良好的代码实践和用户体验是设计Web应用的关键。
`display: inline-block`使得`<span>`元素可以设置宽度和高度，同时保持内联特性，不占据完整的行。`white-space: nowrap`则防止了文本换行，使所有内容都在同一行显示，直到遇到容器的边界。 然而，当内容超出容器...
- 不能设置宽度和高度，但可以设置颜色、字体大小等样式属性。 - 常见的内联元素有：`<span>`, `<a>`, `<strong>`, `<em>` 等。 #### 三、示例代码分析 以下是一些具体的示例代码，用于更好地理解`<div>`和`<span>...
首先，文章指出在IE浏览器中可以通过CSS属性如`word-break`来实现自动换行，但这种方法在Firefox（FF）浏览器中并不可行。因此，作者编写了一个JavaScript脚本，用于在不支持`word-break`属性的浏览器中模拟文字换行...
例如，如果你希望`<span>`元素在不换行的情况下指定宽度，`inline-block`是最佳选择。而如果需要`<span>`独占一行并可以设置宽高，那么可以将其设为`block`。了解并熟练运用这些技巧，可以提升你对HTML布局的控制...