HTML/CSS：指定内部

行数我有一个PHP-的webapp和跨度，这看起来是这样的：HTML/CSS：指定内部

<?= $text ?>

我想确保，即跨度只有一条线。所以如果文字太长，我不想显示最后的单词。我可以使用HTML/CSS来做到这一点吗？或者我必须用PHP/Javascript缩短文本？

来源

2011-01-20 Pascal Klein

你想删除单词吗？还是你想要像'overflow：hidden;`这样的东西？ – Marnix 2011-01-20 15:15:20

我不在乎。这些词应该不会出现，这样整个文本就可以排成一行。我知道我可以用PHP/Javascript删除最后一部分，但是我宁愿在HTML/CSS中使用更简单的东西... – 2011-01-20 15:16:37

这个怎么样？ （很明显，你会设置thewidth到需要的地方在页面上）

文本溢出：省略号是CSS3，只会在现代浏览器的支持，因此在旧的，你会得到一个讨厌的中期字母/单词在最后切断。

span{display: block; width: 100px; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis;}

来源

2011-01-20 15:17:05 theorise

这里有一个功能，将做到这一点：

function display_one_line($text) { 
    $break = strpos($text, "\n"); 

    if ($break === false) { 
     return $text; 
    } 

    return trim(substr($text, 0, $break)); 
}

用法：

<span><?= display_one_line($text) ?></span>

，但如果你只需要做到这一次，您可以使用此一班轮：

<span><?= (($break = strpos($text, "\n")) !== false ? substr($text, 0, $break) : $text) ?></span>

来源

2011-01-20 15:26:26

这是一个粗糙而不完整ÿ测试想法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<style type="text/css"><!-- 
p{ 
    margin: 1em 0; 
    padding: 0; 
} 
span{ 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    vertical-align: bottom; 
    white-space: nowrap; 
    overflow: hidden; 
} 
--></style> 
</head> 
<body> 

<p>This span (<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>&hellip;) is always 200px width.</p> 

</body> 
</html>

概念的这个证明基本上没有这样的：

使跨度块级元件，因此它可以被分配的宽度。
强制跨度在一行中呈现（假设源字符串没有 标记）。
隐藏溢出的内容。
修复边距和对齐，使其保持与父元素相同的水平。

改进欢迎。

来源

2011-01-20 15:31:30

HTML/CSS：指定内部<span>

回答

HTML/CSS：指定内部<span>

回答

相关问题