我从数据库中获取一个字符串,该字符串以大写格式存储,如THIS IS TEST
,但我需要以大写格式This Is Test
我尝试将两个文本转换组合成小写并大写如下所示来获取此
<span class="lowercase capitalize">THIS IS TEST</span>
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
但它没有做好工作!能不能让我知道我做错了什么? 感谢
答案 0 :(得分:1)
CSS无法选择文本节点,因此无法检测单词是否已启动。
CSS private $id;
/**
* @var string
*
* @ORM\Column(name="email", type="string", length=255)
*/
private $email;
/**
* @var string
*
* @ORM\Column(name="username", type="string", length=255)
*/
private $username;
/**
* @var string
*
* @ORM\Column(name="password", type="string", length=255)
*/
private $password;
/**
* @var string
*
* @ORM\Column(name="first_name", type="string", length=255, nullable=true)
*/
private $firstName;
/**
* @var string
*
* @ORM\Column(name="last_name", type="string", length=255, nullable=true)
*/
private $lastName;
/**
* @var string
*
* @ORM\Column(name="location", type="string", length=255, nullable=true)
*/
private $location;
/**
* @var string
*
* @ORM\Column(name="remember_token", type="string", length=255, nullable=true)
*/
private $rememberToken;
/**
* @var \DateTime
*
* @ORM\Column(name="created_at", type="datetime", nullable=true)
*/
private $createdAt;
/**
* @var \DateTime
*
* @ORM\Column(name="updated_at", type="datetime", nullable=true)
*/
private $updatedAt;
/**
* Get id
*
* @return integer
*/
public function getId()
{
return $this->id;
}
/**
* Set email
*
* @param string $email
*
* @return users
*/
public function setEmail($email)
{
$this->email = $email;
return $this;
}
/**
* Get email
*
* @return string
*/
public function getEmail()
{
return $this->email;
}
/**
* Set username
*
* @param string $username
*
* @return users
*/
public function setUsername($username)
{
$this->username = $username;
return $this;
}
/**
* Get username
*
* @return string
*/
public function getUsername()
{
return $this->username;
}
/**
* Set password
*
* @param string $password
*
* @return users
*/
public function setPassword($password)
{
$this->password = $password;
return $this;
}
/**
* Get password
*
* @return string
*/
public function getPassword()
{
return $this->password;
}
/**
* Set firstName
*
* @param string $firstName
*
* @return users
*/
public function setFirstName($firstName)
{
$this->firstName = $firstName;
return $this;
}
/**
* Get firstName
*
* @return string
*/
public function getFirstName()
{
return $this->firstName;
}
/**
* Set lastName
*
* @param string $lastName
*
* @return users
*/
public function setLastName($lastName)
{
$this->lastName = $lastName;
return $this;
}
/**
* Get lastName
*
* @return string
*/
public function getLastName()
{
return $this->lastName;
}
/**
* Set location
*
* @param string $location
*
* @return users
*/
public function setLocation($location)
{
$this->location = $location;
return $this;
}
/**
* Get location
*
* @return string
*/
public function getLocation()
{
return $this->location;
}
/**
* Set rememberToken
*
* @param string $rememberToken
*
* @return users
*/
public function setRememberToken($rememberToken)
{
$this->rememberToken = $rememberToken;
return $this;
}
/**
* Get rememberToken
*
* @return string
*/
public function getRememberToken()
{
return $this->rememberToken;
}
/**
* Set createdAt
*
* @param \DateTime $createdAt
*
* @return users
*/
public function setCreatedAt($createdAt)
{
$this->createdAt = $createdAt;
return $this;
}
/**
* Get createdAt
*
* @return \DateTime
*/
public function getCreatedAt()
{
return $this->createdAt;
}
/**
* Set updatedAt
*
* @param \DateTime $updatedAt
*
* @return users
*/
public function setUpdatedAt($updatedAt)
{
$this->updatedAt = $updatedAt;
return $this;
}
/**
* Get updatedAt
*
* @return \DateTime
*/
public function getUpdatedAt()
{
return $this->updatedAt;
}
属性仅作用于元素(text-transform
)的开始或整体(capitalize
)。但是您可以使用JavaScript方法来解决问题。
您可以在每个空格后拆分文本以检测单词,然后将其包装在uppercase/lowercase
内。之后,使用CSS为每个<span>
标记设置span
text-transform: capitalize
var text = document.getElementById('text').textContent.toLowerCase(); // Convert the sentence to lowercase
var newText = document.getElementById('new-text');
var word = text.split(' '); // Split sentence into an array of words
for (i = 0; i < word.length; i++) { // Access each element in word array
newText.innerHTML += `<span class="capital">` + word[i] + ` </span>`;
}
.capital {
text-transform: capitalize;
}
答案 1 :(得分:-1)
试试这个......
.example {
text-transform:initial;
}
摆脱这个
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
当然会改变这个
<span class="lowercase capitalize">THIS IS TEST</span>
到此......
<span class="example">THIS IS TEST</span>
答案 2 :(得分:-1)
删除类之间的空格,如下所示 -
.lowercase-capitalize {
text-transform: capitalize;
}
<div class="lowercase-capitalize">this is test</div>